常用的js全选checkbox按钮的功能

最新推荐文章于 2023-11-04 00:15:12 发布

showsunrise

最新推荐文章于 2023-11-04 00:15:12 发布

阅读量3.3k

点赞数

分类专栏： javascript 文章标签： stylesheet class javascript input border function

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在WEB项目中关于全选的checkbox功能肯定会遇到，而且每个项目中都会有不少的地方会用到。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。

例子示意图如下：

代码如下：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>checkbox的js全选功能</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="default.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="selectall.js"></script>
<script>
function sel(obj){
_tlsCheckboxSelAll(document.frmUser,obj);
}
</script>
</head><body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px">
<center><b>checkbox的js全选功能</b></center>
<form name="frmUser" id="frmUser" method="post">
<table class="tabelBoder" width="100%" align="center" cellspacing="0" cellpadding="3" border="0">
<tr height="30" class="RH1">
<td width="4%" align="left"><input type="checkbox" name="id_all" id="id_all" value="46" onclick="sel(this)"></td>
<td width="17%" align="left">姓名</td>
<td width="23%" align="left">地址</td>
</tr>
<tr height="30" class="N1">
<td width="4%" align="left"><input type="checkbox" name="id" value="46" onclick="sel(this)"></td>
<td width="17%" align="left">张三</td>
<td width="23%" align="left">北京</td>
</tr>
<tr height="30" class="N1">
<td width="4%" align="left"><input type="checkbox" name="id" value="46" onclick="sel(this)"></td>
<td width="17%" align="left">李四</td>
<td width="23%" align="left">上海</td>
</tr>
<tr height="30" class="N1">
<td width="4%" align="left"><input type="checkbox" name="id" value="46" onclick="sel(this)"></td>
<td width="17%" align="left">王五</td>
<td width="23%" align="left">天津</td>
</tr>
</table>
</form>
<ui>
<li>支持ie和firefox</li>
<li>选中全选checkbox，则所有子checkbox自动选中</li>
<li>去掉选中全选checkbox，则所有子checkbox自动全部取消选中</li>
<li>如果选中全部子checkbox，则全选checkbox自动选中</li>
<li>全选后，如果去掉选中任何子checkbox，则全选checkbox自动取消选中</li>
</ul>
</body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>checkbox的js全选功能</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="default.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="selectall.js"></script>
<script>
    function sel(obj){
        _tlsCheckboxSelAll(document.frmUser,obj);
    }
</script>
</head><body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px">		
<center><b>checkbox的js全选功能</b></center>
<form name="frmUser" id="frmUser" method="post">			
<table class="tabelBoder"  width="100%" align="center" cellspacing="0" cellpadding="3" border="0">
<tr height="30" class="RH1">
<td width="4%" align="left"><input type="checkbox" name="id_all" id="id_all" value="46" οnclick="sel(this)"></td>
<td width="17%" align="left">姓名</td>
<td width="23%" align="left">地址</td>
</tr>
<tr height="30" class="N1">
<td width="4%" align="left"><input type="checkbox" name="id" value="46" οnclick="sel(this)"></td>
<td width="17%" align="left">张三</td>
<td width="23%" align="left">北京</td>
</tr>
<tr height="30" class="N1">
<td width="4%" align="left"><input type="checkbox" name="id" value="46" οnclick="sel(this)"></td>
<td width="17%" align="left">李四</td>
<td width="23%" align="left">上海</td>
</tr>
<tr height="30" class="N1">
<td width="4%" align="left"><input type="checkbox" name="id" value="46" οnclick="sel(this)"></td>
<td width="17%" align="left">王五</td>
<td width="23%" align="left">天津</td>
</tr>
</table>
</form>
<ui>
    <li>支持ie和firefox</li>
    <li>选中全选checkbox，则所有子checkbox自动选中</li>
    <li>去掉选中全选checkbox，则所有子checkbox自动全部取消选中</li>
    <li>如果选中全部子checkbox，则全选checkbox自动选中</li>
    <li>全选后，如果去掉选中任何子checkbox，则全选checkbox自动取消选中</li>
</ul>
</body></html>

Js代码

/**
* checkbox的点击方法
* 要求：
* 1.全选/全不选的checkbox的name属性为单个checkbox的name属性名+_all , 注意:最后必须为_all.
* 例如:单个checkbox的name=or_id,则全选checkbox的name=or_id_all
* 2.全选/全不选的checkbox必须定义id属性,并且id属性值与name属性值相同
* 3.所有单个的checkbox在同一个form中.
* 4.全选/全不选的checkbox可以在form中也可以在form外面.
* 5.整个页面不允许再有和全选/全不选checkbox同name和同id的组件.
*
*/
function _tlsCheckboxSelAll(formObj,checkboxClicked){
var checkName = checkboxClicked.name;//取得点击的checkbox的name属性
var index = checkName.indexOf("_all");//判断是否有_all字符串
var isAll = false;
if(index!=-1){//如果有_all
if(index+"_all".length==checkName.length){//满足说明_all是在最后面，表示这是个全选/全不选的checkbox.
isAll = true;
}
}
var thisChecked = checkboxClicked.checked;//当前checkbox的状态 true=选中 false=不选中
if(isAll){//点了全选/全不选的checkbox
var childCheckName = checkName.substring(0,index);
eval("var allChildCheckboxs = formObj."+childCheckName);
var childCheckboxCount = allChildCheckboxs.length;
if(childCheckboxCount==null){//只有1个单个的checkbox
allChildCheckboxs.checked = thisChecked;
}else{//有2个或2个以上的单个checkbox
for(var i=0;i<childCheckboxCount;i++){
allChildCheckboxs[i].checked = thisChecked;
}
}
}else{//点了单个的checkbox
var parentCheckboxName = checkName+"_all";
if(thisChecked==false){
document.getElementById(parentCheckboxName).checked=false;
}else{//判断点了当前checkbox后是否全部的单个checkbox都处于true状态
eval("var allChildCheckboxs = formObj."+checkName);
var childCheckboxCount = allChildCheckboxs.length;
var isAllChecked = true;
if(childCheckboxCount==null){//只有1个单个的checkbox
if(allChildCheckboxs.checked==false){
isAllChecked = false;
}
}else{//有2个或2个以上的单个checkbox
for(var i=0;i<childCheckboxCount;i++){
if(allChildCheckboxs[i].checked==false){
isAllChecked = false;
break;
}
}
}
if(isAllChecked){//全部单个checkbox都处于true状态
document.getElementById(parentCheckboxName).checked=true;
}
}
}
}

此上为转帖看到这段代码不错，不过就是实现起来太复杂了。

还有别的方法也可以基本实现此功能

一,

function onSelectAll()
{
for(var i = 0;i<document.forms.form1.length;i++){
if(document.forms.form1.elements[i].type=="checkbox"){
if(checkAll.checked==true){
document.forms.form1.elements[i].checked=true;}
else{
document.forms.form1.elements[i].checked=false;
}
}
}
}

二。

function selectAll(obj){
    var chkobj = document.getElementsByName("chkid");
    if(chkobj!=null){
       if(obj.checked){
         for(var i=0;i<chkobj.length;i++){
          chkobj[i].checked=true;
         }
       }
       else{
         for(var i=0;i<chkobj.length;i++){
          chkobj[i].checked=false;
         }
       }
    }