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；如：全选框ＩＤ为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;
}
页面调用如：
- <html>
- <meta http-equiv="Content-Type" content="text/html" charset="gbk" />
- <head>
- <script src="checkBox.js" type="text/javascript"></script>
- </head>
- <body>
- <table>
- <tr width="100%">
- <td >
- 全选高富帅：<input type="checkbox" name="chkMsgId" id="chkMsgId" onclick="doCheck(this,'chkMsgId')" /> <br/>
- 高富帅1：<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId1" value="【高富帅1】值1" /> <br/>
- 高富帅2：<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId2" value="【高富帅】值2"/> <br/>
- 高富帅3：<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId3" value="【高富帅】值3"/> <br/>
- 高富帅4：<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId4" value="【高富帅】值4"/> <br/>
- 高富帅5：<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId5" value="【高富帅】值5"/> <br/>
- </td>
- <td width="20%">
- </td>
- <td style="color:blue;">
- 全选白富美2：<input type="checkbox" name="chk2" id="chk" onclick="doCheck(this,'chk2')" /> <br/>
- 白富美1：<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk21" name="chk21" value="【白富美】值1" /> <br/>
- 白富美2：<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk22" name="chk22" value="【白富美】值2"/> <br/>
- 白富美3：<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk23" name="chk23" value="【白富美】值3"/> <br/>
- 白富美4：<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk24" name="chk24" value="【白富美】值4"/> <br/>
- 白富美5：<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk25" name="chk25" value="【白富美】值5"/> <br/>
- </td>
- </tr>
- </table>
- <br/><br/>
- <input type="button" value="获取【高富帅】选中按钮值" onclick="alert(getCheckBoValue('chkMsgId'));"/>
- <input type="button" value="获取【白富美】选中按钮值" onclick="alert(getCheckBoValue('chk2'));"/>
- <br/><br/>
- <font style="color:red;font-size:12px;">
- 提示：
- 1.点击全选按钮就可以控制全选、反选；<br/>
- 2.勾选子项可以控制全选按钮；<br/>
- 3.多个全选复选框id不要存在包含关系；
- </font>
- </body>
- </html>