实现checkbox全选非全选单选

Posted 2020-11-13 xiaowoniulx

全局选择与单选有以下两点关系：

1、当我把所有单选都选择上的时候，全选应该是被选择状态

2、当我取消一个单选时，全选应该是取消的状态

如果不存在全局选择与单选之间的关系，则会出现如下两图情况：

 

 代码实现：（为了更清晰方便，所以只有复选框，可以根据自己需要进行修改）

<div>
  <ul>
    <li> 
      <!--全选-->
      <input type="checkbox" id="all" class="parent_check">全选</li>
  </ul>
</div>
<div class="dataBox">
  <ul >
    <li >
      <input type="checkbox" id="checkbox_1" class="son_check">
    </li>
  </ul>
  <ul >
    <li >
      <input type="checkbox" id="checkbox_2" class="son_check">
    </li>
  </ul>
<div>

$(function () {
    //全局的checkbox选中和未选中的样式
    $parentChexbox = $(‘.parent_check‘), //全选
    $dataBox = $(‘.dataBox‘),            //用于判断全局与子类的关系
    $sonCheckBox = $(‘.son_check‘);      //单个子类选中
 
    //全局全选与单个的关系
    $parentChexbox.click(function () {
        var $checkboxs = $dataBox.find(‘input[type="checkbox"]‘);
        if ($(this).is(‘:checked‘)) {
            $checkboxs.prop("checked", true);
        } else {
            $checkboxs.prop("checked", false);
        }
    });
    
    $sonCheckBox.each(function () {
        $(this).click(function () {
            if ($(this).is(‘:checked‘)) {
                //判断：所有单个是否勾选
                var len = $sonCheckBox.length;
                var num = 0;
                $sonCheckBox.each(function () {
                    if ($(this).is(‘:checked‘)) {
                        num++;
                    }
                });
                if (num == len) {
                    $parentChexbox.prop("checked", true);
                }
            } else {
                //单个取消勾选，全局全选取消勾选
                $parentChexbox.prop("checked", false);
            }
        })
    })
});