JQuery实现的 checkbox 全选；下拉框功能 本文转载自 查看原文 2017-02-22 17:27 3355 jQuery+JS/ Jquery、复选框全选、反选 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. HTML页面代码如下： <input type="checkbox" id="SelectAll" value="全选" onclick="selectAll();"/> <input type="checkbox" name="subcheck[]" value="1" onclick="setSelectAll();"/> <input type="checkbox" name="subcheck[]" value="2" onclick="setSelectAll();"/> <input type="checkbox" name="subcheck[]" value="3" onclick="setSelectAll();"/> <input type="checkbox" name="subcheck[]" value="4" onclick="setSelectAll();"/> × 免责声明！ 本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱[e-mail]删除。 猜您在找 elementUI的select下拉框增加checkbox选择框（可全选/取消） 使用jquery select2实现下拉框搜索功能 elementui 实现select下拉框互斥功能 element UI select 下拉框 实现可搜索下拉框功能 jquery实现可编辑的下拉框( input + select ) jquery实现select下拉框可输入+联想关联option 基于bootstrap selectpicker ，实现select下拉框模糊查询功能 js实现Select下拉框具有输入功能的方法 【经验】angularjs 实现带查找筛选功能的select下拉框 jQuery对下拉框Select操作总结 粤ICP备18138465号 © 2018-2025 CODEPRJ.COM

 

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.

 

HTML页面代码如下：

 

<input type="checkbox" id="SelectAll"  value="全选" onclick="selectAll();"/>

<input type="checkbox" name="subcheck[]"  value="1" onclick="setSelectAll();"/>
<input type="checkbox" name="subcheck[]"  value="2" onclick="setSelectAll();"/>
<input type="checkbox" name="subcheck[]"  value="3" onclick="setSelectAll();"/>
<input type="checkbox" name="subcheck[]"  value="4" onclick="setSelectAll();"/>