全选并取消选中带有jQuery的复选框

Question

I have 10 checkbox working properly with check all and uncheck all..not workin with when you click on 'select all' and if uncheck anyone of checkbox then 'select All' remain in check status...

code is here....

 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

Also compare the length of checkbox with length of checked checkboxes

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