全选并取消选中带有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

另外比较length的checkbox与length的checked复选框

 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/> 

Answer 2

？

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="selectAll(true)">Select All</button> <button onclick="selectAll(false)">Unselect All</button> <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/>