javascript - 如何使用jQuery创建全选功能

我正在作为一个全选选项的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>

提前致谢。

最佳答案

尝试以下操作（也可以使用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>

关于javascript - 如何使用jQuery创建全选功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26864980/