首页 > 代码库 > JQuery实现的 checkbox 全选、反选。
JQuery实现的 checkbox 全选、反选。
1. 全选的checkbox选中时,子checkbox全部选中。反之,全部不选
2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中
3.子checkbox的数量和子checkbox被选中的数量一样时,全选checkbox要被选中
[javascript] view plain copy
- //复选框事件
- //全选、取消全选的事件
- function selectAll(){
- if ($("#SelectAll").attr("checked")) {
- $("input[name=‘subcheck‘]").attr("checked", true);
- } else {
- $(":checkbox").attr("checked", false);
- }
- }
- //子复选框的事件
- function setSelectAll(){
- //当没有选中某个子复选框时,SelectAll取消选中
- if (!$("#subcheck").checked) {
- $("#SelectAll").attr("checked", false);
- }
- var chsub = $("input[type=‘checkbox‘][name=‘subcheck‘]").length; //获取subcheck的个数
- var checkedsub = $("input[type=‘checkbox‘][name=‘subcheck‘]:checked").length; //获取选中的subcheck的个数
- if (checkedsub == chsub) {
- $("#SelectAll").attr("checked", true);
- } else{
- $("#SelectAll").attr("checked", false);}
- }
全选checkbox的id是SelectAll,子checkbox的name是subcheck.
JSP页面代码如下:
[html] view plain copy
- <input type="checkbox" id="SelectAll" value=http://www.mamicode.com/"全选" onclick="selectAll();"/>
- <input type="checkbox" name="subcheck[]" value=http://www.mamicode.com/"1" onclick="setSelectAll();"/>
- <input type="checkbox" name="subcheck[]" value=http://www.mamicode.com/"2" onclick="setSelectAll();"/>
- <input type="checkbox" name="subcheck[]" value=http://www.mamicode.com/"3" onclick="setSelectAll();"/>
- <input type="checkbox" name="subcheck[]" value=http://www.mamicode.com/"4" onclick="setSelectAll();"/>
JQuery实现的 checkbox 全选、反选。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。