checkbox全选/全不选,子复选框全选父复选框选中

Posted oneduan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了checkbox全选/全不选,子复选框全选父复选框选中相关的知识,希望对你有一定的参考价值。

<input type="checkbox" class="optionListAll">/* 父复选框 */
<input type="checkbox" name="optionList">
<input type="checkbox" name="optionList">
<input type="checkbox" name="optionList">
<input type="checkbox" name="optionList">
<input type="checkbox" name="optionList">
<input type="checkbox" name="optionList">
<input type="checkbox" name="optionList">
var optionListAll = $(‘.optionListAll‘);
var allList= $(‘[name="optionList"]‘);
var listLength = allList.length; // 父复选框全选/全不选 optionListAll.on("click", function() { var self = $(this); var state = self.prop(‘checked‘); allList.each(function() {
    var that = $(this); state ? that.prop(‘checked‘, true) : that.prop(‘checked‘, false); // 判断父复选框是否选中,选中则子复选框全部选中 }) }); //子复选框 allList.each(function() {   var that = $(this); that.on(‘click‘, function () {     var selectedListLength = $(‘[name="optionList"]:checked‘); // 选中的长度     for(var i = 0; i < listLength; i++) {       if(!allList[i].checked) { // 子复选框有一个没选择,父复选框不选         optionListAll.prop(‘checked‘, false); } } if( selectedListLength.length === listLength) { // 子复选框都选择,复选框选中
      optionListAll.prop(‘checked‘, true); } });

 

以上是关于checkbox全选/全不选,子复选框全选父复选框选中的主要内容,如果未能解决你的问题,请参考以下文章

jQuery使复选框一键全选/全不选

jQuery js实现checkbox复选框全选全不选反选 PHP

jQuery实现复选框全选全不选

jQuery实现复选框全选全不选

js复选框实现全选全不选反选

Jquery复选框的全选全不选及选择所有复选框实现全选的复选框