javascript - 如何使用 jquery 创建一个全选函数

Question

我正在研究一个用作全选选项的 jquery 函数。一切正常，除了当我取消选择 select all 的任何子元素时，该选项仍处于启用状态。我只想根据子项禁用或启用 select all 选项。这是我的代码。

$('#show_ntf_all').click(function() {
  if (!$(this).hasClass('check')) {
    $('.show_ntf').addClass('check');
    $(this).addClass('check');
  } else {
    $('.show_ntf').removeClass('check');
    $(this).removeClass('check');
  }
});

$('.sep_fld').on('click', '.show_ntf', function() {
  if ($(this).hasClass('check')) {
    var check_length = $('.show_ntf').filter(".check").length;
    var show_length = $('.show_ntf').length;
    console.log(check_length);
    console.log(show_length);
    var check = check_length == show_length;
    $(this).removeClass('check')
    if (check == true) {
      $('#show_ntf_all').addClass('check');
    } else {
      $('#show_ntf_all').removeClass('check');
    }
  } else {
    $(this).addClass('check')
  }
});

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 5px 0px;
  margin: 0;
}

#show_ntf_all {
  margin-bottom: 20px;
}

li label {
  color: #aaa;
}

li.check label {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sett_field notif_all'>
  <ul>
    <li class="" id="show_ntf_all">
      <label>select all</label>
    </li>
  </ul>
</div>

<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>

提前致谢。

Answer 1

试试这个(另外，您可以使用 toggleClass 来缩短代码):

$('.sep_fld').on('click', '.show_ntf', function () {
        $(this).toggleClass('check');
        var check_length = $('.show_ntf').filter(".check").length;
        var show_length = $('.show_ntf').length;
        var check = check_length==show_length;
        if (check==true){
            $('#show_ntf_all').addClass('check');                
        }
        else{
            $('#show_ntf_all').removeClass('check');
        }
});

完整片段:

$('#show_ntf_all').click(function() {
  if (!$(this).hasClass('check')) {
    $('.show_ntf').addClass('check');
    $(this).addClass('check');
  } else {
    $('.show_ntf').removeClass('check');
    $(this).removeClass('check');
  }
});

$('.sep_fld').on('click', '.show_ntf', function() {
  $(this).toggleClass('check');
  var check_length = $('.show_ntf').filter(".check").length;
  var show_length = $('.show_ntf').length;
  console.log(check_length);
  console.log(show_length);
  var check = check_length == show_length;
  if (check == true) {
    $('#show_ntf_all').addClass('check');
  } else {
    $('#show_ntf_all').removeClass('check');
  }
});

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 5px 0px;
  margin: 0;
}

#show_ntf_all {
  margin-bottom: 20px;
}

li label {
  color: #aaa;
}

li.check label {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sett_field notif_all'>
  <ul>
    <li class="" id="show_ntf_all">
      <label>select all</label>
    </li>
  </ul>
</div>

<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>