首页 > 代码库 > jQuery --checkbox全选和取消全选简洁高效的解决办法
jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目，其中有一个全选和取消全选的这么一个模块，搞了半天找不到一种最佳的解决方案！后来通过各种努力找到了一种简洁高效的解决办法，这里想和大家分享一下。有问题的话，还望各路大神指导一二。
html代码如下：
<fieldset data-role="controlgroup">
<label><input type="checkbox" name="boxes" id="select_all" onclick="selectAll();" >全选</label> <label><input type="checkbox" name="box" onclick="select();" >子选项1</label> <label><input type="checkbox" name="box" onclick="select();" >子选项2</label>
</fieldset>
jquery代码如下：
function selectAll(){ if ($("#select_all").prop("checked")) { $("input[name=‘box‘]").prop("checked", true).checkboxradio("refresh"); } else { $("input[name=‘box‘]").prop("checked", false).checkboxradio("refresh"); } }
/*如果子项全被选中或者某一个子项被取消，全选项相应的勾选或者全选相应取消勾选*/
function select(){
if ($("#select_all").prop("checked")){
$("input[name=‘box‘]").each(function(){
if(this.checked == false)
{
$("input[name=‘boxes‘]").prop("checked", false).checkboxradio("refresh");
}
});
}
else{
var n = 0;
$("input[name=‘box‘]").each(function(){
if(this.checked == false){
n++;
}
});
if(!n){
$("input[name=‘boxes‘]").prop("checked", true).checkboxradio("refresh");
}
}
}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。