欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2

程序员文章站 2022-03-20 14:57:39
...
/**
*js控制复选框全选V2.0版本使用说明
*
*修复功能:加入同一页面多个复选框全选控制
*
*1.在页面中引用该js;
*2.在全选框onclick事件中调用doCheck(obj,firstCheckBox)方法:obj:this;firstCheckBox:全选框ID
*3.在全选项onclick事件中调用toChkSon(obj,firstCheckBox)方法:obj:this.checked;firstCheckBox:子项ID
*4.注意:子项ID须存在全选框ID;如:全选框ID为selectAll 则子项id必须存在selectAll字符
*5.获取选中的子复选框调用getCheckValue(firstCheckBox)方法: firstCheckBox:全选框ID
*6.获取选中的复选框值调用getCheckBoValue(firstCheckBox)方法: firstCheckBox:全选框ID (返回value值用;隔开)
*
*@author:张申龙
*@date:20130419 
**/

/**
* 操作全选复选框事件(用于全选复选框)
* obj this
* firstCheckBox 全选的复选框id
**/
function doCheck(obj,firstCheckBox)
{  
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++)
	{  
		if(inputs[i].type=="checkbox" && inputs[i].id!=firstCheckBox && inputs[i].id.indexOf(firstCheckBox)!=-1) //刷选出所有复选框
		{
			inputs[i].checked=obj.checked; 
		}
	}
}

/**
* 复选框变化  全选按钮变化(用于下面复选框)
* obj this.checked
* firstCheckBox 全选的复选框id
**/
function toChkSon(obj,firstCheckBox)
{
	if(obj==false) //当此复选框未选中 全选为未选
	{
		document.getElementById(firstCheckBox).checked=false;
		return ;
	}

	var chkInputs=getCheckBox(firstCheckBox); //获取所有复选框
	var j=0;
	for(var i=0;i<chkInputs.length;i++)
	{
		if(chkInputs[i].checked==obj)
			j++;
		else
			break;
	}	
	
	if(j==chkInputs.length) //当所有复选框为同一状态时 赋值全选同一状态
		document.getElementById(firstCheckBox).checked=obj;
}

/**
* 获取所有复选框
**/
function getCheckBox(firstCheckBox)
{
	var inputs=document.getElementsByTagName("input");
	var chkInputs=new Array();
	var j=0;
	for(var i=0;i<inputs.length;i++)
	{
		if(inputs[i].type=="checkbox" && inputs[i].id!=firstCheckBox && inputs[i].id.indexOf(firstCheckBox)!=-1) //刷选出所有复选框
		{
			chkInputs[j]=inputs[i];
			j++;
		}
	}
	return chkInputs;
}	

/**
**获取选中复选框值 用;隔开
**/
function getCheckBoValue(firstCheckBox){
	var chkInputs=getCheckValue(firstCheckBox); //获取选中所有复选框
	var values="";
	
	if(chkInputs==null || chkInputs.length==0){
		alert("请选中一项");
	}else{ 
		for(var i=0;i<chkInputs.length;i++){
			values+=chkInputs[i].value+";";
		} 
	}
	return values;
}

/**
* 选中复选框集合
**/
function getCheckValue(firstCheckBox){
	var chkInputs=getCheckBox(firstCheckBox); //获取所有复选框
	var inputArray=new Array();
	if(chkInputs!=null && chkInputs.length>0){
		var j=0;
		for(var i=0;i<chkInputs.length;i++){
			if(chkInputs[i].checked){
				inputArray[j]=chkInputs[i];
				j++;
			}
		}
	}
	return inputArray;
}


 
 

  页面调用如:

 

  1. <html>
  2.     <meta http-equiv="Content-Type" content="text/html" charset="gbk" /> 
  3. <head>
  4.  <script src="checkBox.js" type="text/javascript"></script>
  5. </head>
  6. <body>  
  7. <table>
  8. <tr width="100%">
  9. <td >
  10. 全选高富帅:<input type="checkbox" name="chkMsgId" id="chkMsgId" onclick="doCheck(this,'chkMsgId')" /> <br/>  
  11. 高富帅1:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId1" value="【高富帅1】值1" /> <br/>  
  12. 高富帅2:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId2" value="【高富帅】值2"/> <br/>  
  13. 高富帅3:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId3" value="【高富帅】值3"/> <br/>   
  14. 高富帅4:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId4" value="【高富帅】值4"/> <br/>    
  15. 高富帅5:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId5" value="【高富帅】值5"/> <br/>  
  16. </td>
  17. <td width="20%">
  18. </td>
  19. <td style="color:blue;">
  20. 全选白富美2:<input type="checkbox" name="chk2" id="chk" onclick="doCheck(this,'chk2')" /> <br/>  
  21. 白富美1:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk21" name="chk21" value="【白富美】值1" /> <br/>  
  22. 白富美2:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk22" name="chk22" value="【白富美】值2"/> <br/>  
  23. 白富美3:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk23" name="chk23" value="【白富美】值3"/> <br/>   
  24. 白富美4:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk24" name="chk24" value="【白富美】值4"/> <br/>    
  25. 白富美5:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk25" name="chk25" value="【白富美】值5"/> <br/>  
  26. </td>
  27. </tr>
  28. </table>
  29.  
  30. <br/><br/> 
  31. <input type="button" value="获取【高富帅】选中按钮值" onclick="alert(getCheckBoValue('chkMsgId'));"/>
  32. <input type="button" value="获取【白富美】选中按钮值" onclick="alert(getCheckBoValue('chk2'));"/>
  33.      
  34. <br/><br/>
  35. <font  style="color:red;font-size:12px;">
  36. 提示:
  37. 1.点击全选按钮就可以控制全选、反选;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  38. 2.勾选子项可以控制全选按钮;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  39. 3.多个全选复选框id不要存在包含关系;
  40. </font>
  41.   </body>  
  42. </html>