Select all checkbox to be checked if all checkboxes are checked

Question

I need my selectAll checkbox to be checked if all the other checkboxes are checked. Any idea how to do this in javascript?

My javascript code:

function selectAll(box) {
    var selectAllchk = box.checked;
    var checkboxes = document.getElementsByName('chkbox');
    if (box.checked){
        for (var i in checkboxes){
            $(":checkbox").attr("checked", true);
        }
    } else {
        $('input:checkbox:not(:disabled)').removeAttr('checked');
    }
}


function selectCheckAll(box){
    var a = ('.checkbox').length;
    if ($(':checkbox:checked').length == $('.checkbox').length) {
       //do something
    }
};

Jsp code:

<td align="center" colspan="5">
  <display:table name="contratBonusForm" property="contrats" defaultsort="1" 
  sort="list" defaultorder="ascending" requestURI="/gestionContratBonusActionIn.do?dispatch=searchContrat" 
  uid="current" pagesize="30" class="tableauDisplayTag">
   <display:column title="ID Type" property="id" sortable="true"/>
   <display:column title="Type de contrat" property="type" sortable="true"/>
  <% %>
  <display:column title="Bonus <input type='checkbox' name='selectall' onClick='selectAll(this)'/>" align="center" >
  <% TypeContratPOJO type = (TypeContratPOJO) pageContext.getAttribute("current");
  Long Eli = 1L;
  int ok = type.getBonus().compareTo(Eli);
  (current != null &&  ok == 0) { %>
  <input type="checkbox" name="chkbox" checked="checked" onClick='selectCheckAll(this)' value="<%=indice%>"/>
  <% } else { %>
  <input type="checkbox" name="chkbox" value="<%=indice%>"/>
  <% } %>
  </display:column>
  <%indice++; %>            
  </display:table>
</td>

When I select a checkbox it does not enter the selectCheckAll function.

Answer 1

Use jquery to bind a change event to your check box then check it. I don't know if there is any other better way, but I'd do it in this way, please tell me if there are any other better ways. Thanks

var myChkBoxes = $('.checkbox')
myChkBoxes .on('change', function(){
  var blnAllChk = $('.checkbox:checked').length === myChkBoxes.length;
  blnAllChk ? (all checkboxes are checked, do something) : (else, do something);
});

Answer 2

You can compare the number that can be checked vs the number that are checked and set the check all checkbox accordingly. The following is a quick hack in POJS to demonstrate the method, there's likely a jQuery equivalent.

 function checkAll(inp) { document.querySelectorAll('.groupA').forEach(el => el.checked = inp.checked); } function setCheckAll() { document.querySelector('input.checkAll').checked = document.querySelectorAll('.groupA').length == document.querySelectorAll('.groupA:checked').length; } 

 A <input class="groupA" type="checkbox" checked onclick="setCheckAll()"><br> B <input class="groupA" type="checkbox" onclick="setCheckAll()"><br> Check all<input class="checkAll" type="checkbox" onclick="checkAll(this)">