javascript - 使用 jquery 全选和取消选择复选框

Question

我有 10 个复选框可以正常工作，可以选中全部和取消选中全部。当您单击“全选”时，如果取消选中任何一个复选框，则“全选”仍处于选中状态，但无法正常工作...

代码在这里......

 function selectAll(status) {
       $('input[name=selectedId]').each(function(){
         $(this).prop('checked', status);
      });

    }


   <input type="checkbox" class="selectedId" name="selectedId" id="1" />1 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="2" />2 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="3" />3 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="4" />4 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="5" />5 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="6" />6 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="6" />6 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="7" />7 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="8" />8 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="9" />9 <br />
   <input type="checkbox" class="selectedId" name="selectedId" id="10" />10<br/>

Answer 1

还将 checkbox 的 length 与 checked 复选框的 length 进行比较

function selectAll() {
  var checked = this.checked;
  $('input[name=selectedId]').each(function() {
    $(this).prop('checked', checked);
  });
}
$('#selectall').on('change', selectAll);
$('input[name=selectedId]').change(function() {
  $('#selectall').prop('checked', $('input[name=selectedId]:checked').length == $('input[name=selectedId]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" class="selectedId" id="selectall" />Select all
<br />
<br />

<input type="checkbox" class="selectedId" name="selectedId" id="1" />1
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="2" />2
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="3" />3
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="4" />4
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="5" />5
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="6" />6
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="6" />6
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="7" />7
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="8" />8
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="9" />9
<br />
<input type="checkbox" class="selectedId" name="selectedId" id="10" />10
<br/>