首页 > 代码库 > checkbox做全选按钮
checkbox做全选按钮
1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求
(1)点击全选按钮选中时,所有的复选框选中.
(2)点击全选按钮取消选中时,所有复选框取消选中。
<input type="checkbox" id="quanxuan" />全选<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br />
2.js处理代码
$("#quanxuan").click(function(){//给全选按钮加上点击事件 var xz = $(this).prop("checked");//判断全选按钮的选中状态 var ck = $(".qx").prop("checked",xz); //让class名为qx的选项的选中状态和全选按钮的选中状态一致。 })
以上代码完全可以完美的实现要求的2个功能。这里需要注意的是不能使用下面的方法做全选按钮,因为下面的方法有严重的不足之处。
1.html页面
<input type="checkbox" onclick="quanxuan(this)" />全选<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br /> <input type="checkbox" class="qx" />aa<br />
2.处理页面
<script type="text/javascript"> function quanxuan(a) { //找到下面所有的复选框 var ck =document.getElementsByClassName("qx"); //遍历所有复选框,设置选中状态。 for(var i=0;i<ck.length;i++) { if(a.checked)//判断全选按钮的状态是不是选中的 { ck[i].setAttribute("checked","checked");//如果是选中的,就让所有的状态为选中。 } else { ck[i].removeAttribute("checked");//如果不是选中的,就移除所有的状态是checked的选项。 } } } </script>
上面的方法看似也可以实现全选按钮的功能,但是执行下列操作步骤后就会出现问题:
(1)点击任意一个复选框,使复选框处于选中状态;
(2)点击全选按钮,所有复选框变成了选中状态;
(3)再次点击全选按钮,所有按钮应该取消选中状态。但是问题出现了,第1步中选中的选中的按钮还是处于选中状态。
这就是第二种全选按钮方法存在的弊端,所以全选按钮最好使用第一种,方便而实用。
checkbox做全选按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。