jquery全選択demo

9262 ワード

<div class="demo1">
<h2>js         DEMO</h2>
   <input name="mm" onclick="checkItem(this, 'mmAll')" type="checkbox"><br>
   <input name="mm" onclick="checkItem(this, 'mmAll')" type="checkbox"><br>
   <input name="mm" onclick="checkItem(this, 'mmAll')" type="checkbox"><br>
   <input name="mm" onclick="checkItem(this, 'mmAll')" type="checkbox"><br>
   <input name="mm" onclick="checkItem(this, 'mmAll')" type="checkbox"><br><br>
<label><input name="mmAll" onclick="checkAll(this, 'mm')" type="checkbox">&nbsp;&nbsp;         </label>
</div>
<script type="text/javascript">
function checkAll(e, itemName)
{
  var aa = document.getElementsByName(itemName);
  for (var i=0; i<aa.length; i++)
   aa[i].checked = e.checked;
}
function checkItem(e, allName)
{
  var all = document.getElementsByName(allName)[0];
  if(!e.checked) all.checked = false;
  else
  {
    var aa = document.getElementsByName(e.name);
    for (var i=0; i<aa.length; i++){
//alert(aa[i].checked);
      if(!aa[i].checked) return;
		}
    all.checked = true;
  }
}</script>

 
 
function oamCheckBoxClick(){
		var flag = false;
		var flag1 = true;
		$("#panel-1 ul input[type='checkbox']").each(function(){
			if(this.checked){
				flag = true;
			}else{
				flag = false;
				flag1 = false;
			}
		})
		if(flag && flag1){
			document.getElementById("selectAll1").checked = true;
		}else{
			document.getElementById("selectAll1").checked = false;
		}
	}


function selectAll(e,flag){
		if(flag==1){
			$("#panel-1 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
		}else if(flag==2){
			$("#panel-2 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
		}else if(flag==3){
			$("#panel-3 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
		}else if(flag==4){
			$("#panel-4 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
		}
	}

 
 
 
$(function(){
	    buildSelect(
	    		"#select-sendPno",
	    		"<s:text name='sms.jsp.common.please.select'/>",
	    		"/sms/oamCCConf_initSendPnoSelect.action",
	    		false,
	    		function(obj){
	    			//select    
	    		}
	    );
		buildPanel("#panel-config","<s:text name='sms.jsp.common.syncParamSet'/>","null","350",true,false);
		buildPanel("#panel-all","&nbsp;<input type='checkbox' id='selectAll' onclick='selectAll(this,0)' />&nbsp;&nbsp;<strong><s:text name='sms.jsp.common.selectAll'/></strong>","null","null",false,false);
		buildPanel("#panel-1","&nbsp;<input type='checkbox' id='selectAll1' name='selectpanel' onclick='selectAll(this,1)' />&nbsp;&nbsp;<s:text name='sms.jsp.oam.sync.1'/>","null","null",true,false);
		buildPanel("#panel-2","&nbsp;<input type='checkbox' id='selectAll2' name='selectpanel' onclick='selectAll(this,2)'/>&nbsp;&nbsp;<s:text name='sms.jsp.oam.sync.2'/>","null","null",true,false);
		buildPanel("#panel-3","&nbsp;<input type='checkbox' id='selectAll3' name='selectpanel' onclick='selectAll(this,3)'/>&nbsp;&nbsp;<s:text name='sms.jsp.oam.sync.3'/>","null","null",true,false);
		buildPanel("#panel-4","&nbsp;<input type='checkbox' id='selectAll4' name='selectpanel' onclick='selectAll(this,4)'/>&nbsp;&nbsp;<s:text name='sms.jsp.oam.sync.4'/>","null","null",true,false);
		//cp   tree   
		$.ajax({
			type:"post",
			url:getRootPath()+"/sms/oamSipApp_initSyncCpMod.action",
			dataType:"json",
			success:function(obj){
				$("#comboboxId").umapComboboxTree({
					height:150,
					data:obj
				});
			}
		})
	});
	function oamCheckBoxClick(panel){
		var selectflag = false;
		var removeflag = true;
		var selectAllflag = false;
		var removeAllflag = true;
		var panelstr = "";
		if(panel==1){
			panelstr = "#panel-1 ul input[type='checkbox']";
		}else if(panel==2){
			panelstr = "#panel-2 ul input[type='checkbox']";
		}else if(panel==3){
			panelstr = "#panel-3 ul input[type='checkbox']";
		}else if(panel==4){
			panelstr = "#panel-4 ul input[type='checkbox']";
		}
		$(panelstr).each(function(){
			if(this.checked){
				selectflag = true;
			}else{
				removeflag = false;
			}
		})
		if(selectflag && removeflag){
			if(panel==1){
				document.getElementById("selectAll1").checked = true;
			}else if(panel==2){
				document.getElementById("selectAll2").checked = true;
			}else if(panel==3){
				document.getElementById("selectAll3").checked = true;
			}else if(panel==4){
				document.getElementById("selectAll4").checked = true;
			}
		}else{
			if(panel==1){
				document.getElementById("selectAll1").checked = false;
			}else if(panel==2){
				document.getElementById("selectAll2").checked = false;
			}else if(panel==3){
				document.getElementById("selectAll3").checked = false;
			}else if(panel==4){
				document.getElementById("selectAll4").checked = false;
			}
		}
		$("[name='selectpanel'").each(function(){
		      if(this.checked){
		    	  selectAllflag = true;
		      }else{
		    	  removeAllflag = false;
		      }
		})
		if(selectAllflag && removeAllflag){
			document.getElementById("selectAll").checked = true;
		}else{
			document.getElementById("selectAll").checked = false;
		}
	}
	//
	function selectAll(e,flag){
		var selectflag = false;
		var removeflag = true;
		if(flag==0){
			$("input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
		}else if(flag==1){
			$("#panel-1 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
			$("[name='selectpanel'").each(function(){
			      if(this.checked){
			    	  selectflag = true;
			      }else{
			    	  removeflag = false;
			      }
			})
			
		}else if(flag==2){
			$("#panel-2 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
			$("[name='selectpanel'").each(function(){
			      if(this.checked){
			    	  selectflag = true;
			      }else{
			    	  removeflag = false;
			      }
			})
		}else if(flag==3){
			$("#panel-3 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
			$("[name='selectpanel'").each(function(){
			      if(this.checked){
			    	  selectflag = true;
			      }else{
			    	  removeflag = false;
			      }
			})
		}else if(flag==4){
			$("#panel-4 ul input[type='checkbox']").each(function(){
			      this.checked = e.checked ;
			})
			$("[name='selectpanel'").each(function(){
			      if(this.checked){
			    	  selectflag = true;
			      }else{
			    	  removeflag = false;
			      }
			})
		}
		if(flag!=0){
			if(e.checked && selectflag && removeflag){
				document.getElementById("selectAll").checked = true;
			}else{
				document.getElementById("selectAll").checked = false;
			}
		}
	}