Jquery实现复选框全选与全不选

JavaScript023

Jquery实现复选框全选与全不选,第1张

1、首先web项目结构如图所示，这个结构熟悉的话可以自己调整的。

2、然后设置一些较为简单的选项框，这里随便用abcd来代替选项框了。

3、这里是jq来实现全选，所以引入jQuery，并且给按钮绑定一个jQuery类型的点击事件即可。

4、然后通过prop来设置input的属性即可设置全选了，prop是jq自带的一个方法。

5、因为CheckBox可以设置checked属性，所以我们把它设置为true即可。

6、最后预览，可以看到CheckBox都被checked中了，这样就达到全选了。

CheckBox复选框JS实现全选全不选功能,很简单，就只需插入一小段js函数就行了。。。

<script language="javascript">

function cli(Obj)

{

//获取控制其它复选框的对象obj

var collid = document.getElementByIdx_x("all")

//获取需要全选，全不选功能的所有复选框

var coll = document.getElementsByName(Obj)

//如果obj被选中，则全选

if (collid.checked){

//循环设置所有复选框为选中状态

for(var i = 0i <coll.lengthi++)

coll[i].checked = true

}else{//取消obj选中状态，则全不选

//循环设置所有复选框为未选中状态

for(var i = 0i <coll.lengthi++)

coll[i].checked = false

}

}

</script>

----------------------------------------------------

下面是一组CheckBox复选框html代码

----------------------------------------------------

<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称')"> 全选

<input name='多选项名称' type='checkbox' value='' > A

<input name='多选项名称' type='checkbox' value='' > B

<input name='多选项名称' type='checkbox' value='' > C

<input name='多选项名称' type='checkbox' value='' > D

<input name='多选项名称' type='checkbox' value='' > E

<input name='多选项名称' type='checkbox' value='' > F

----------------------------------------------------

1.首先，确定全选、全不选节点 定名node1

2.确定有多少个checkbox 

    var ck=$("checkbox")//这是集合节点

 接下来是逻辑

 判断node1是勾选还是不勾选 change事件

     var bool=$(node1).attr("checked") //返回true或者false

     if(bool){//如果是true 说明全选

         $.each(ck,function(i,val){//val是每一个节点

             $(val).attr("checked",true)//让节点选中

             $(node1).attr("checked",true)

         })

     }else{//如果是false说明全选

         $.each(ck,function(i,val){//val是每一个节点

             $(val).attr("checked",false)//让节点不选中

             $(node1).attr("checked",false) 

         })

     }

     

     

   接下来是其它checkbox change事件

       当一点击 判断选中的有多少个

       var ck1=$("[type='checkbox'][checked='checked']")这个是选中的节点集合

       if(ck1.length=ck.length){//两个相等

           就说明全选了 让$(node1).attr("checked",true)

        }else {

        $(node1).attr("checked",false) 

        }