javascript - 如果没有按类选中任何复选框，请检查 jQuery

Question

我有 4 个复选框:一个“全部”和三个不同的元素。不同的元素有一个类，“全部”复选框有一个 id。如果没有检查任何其他元素，我想检查“全部”复选框。我编写了这段代码，但不起作用(头脑意味着一切)

$(document).ready(function() {
  $('#check-nemek-mind').click(function() {
    $('.check-nemek').prop('checked', false);
    $('#check-nemek-mind').prop('checked', true);
  });
  $('.check-nemek').click(function() {
    $('#check-nemek-mind').prop('checked', false);
    if (document.getElementByClass('check-nemek').checked) {} else {
      $('#check-nemek-mind').prop('checked', true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox">
  <label><input type="checkbox" id="check-nemek-mind" rel="nemek-mind" checked /><strong>Mind</strong></label>
</div>
<div class="checkbox">
  <label><input type="checkbox" class="check-nemek" rel="nemek-noi"/>Női divat</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" class="check-nemek" rel="nemek-ferfi"/>Férfi divat</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" class="check-nemek" rel="nemek-gyerek"/>Gyerek divat</label>
</div>

Answer 1

document.getElementByClass('check-nemek').checked

更改为

$('.check-nemek').is(':checked')

我们更改此设置的原因是:

1. 文档对象上没有 getElementByClass - 您正在寻找 getElementsByClassName

2. 如果我们确实切换到正确的 getElementsByClassName - 它将返回与我们的搜索匹配的所有元素的列表 - 然后我们需要迭代该列表以查找“检查”状态

3. 我们可能希望改用 JQuery，因为所有其他 DOM 交互都在使用它。

4. JQuery 将返回的元素包装在 JQuery 包装器中，这使我们能够访问辅助方法，例如“.is(':checked')” - 这将检查返回的列表，而无需我们编写迭代代码。