全選並取消選中帶有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/>