Aktivieren Sie das Kontrollkästchen, wenn alle Kontrollkästchen aktiviert sind.

Question

Ich muss mein Kontrollkästchen selectAll aktivieren, wenn alle anderen Kontrollkästchen aktiviert sind. Irgendeine Idee, wie man das in Javascript macht?

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

Wenn ich eine Checkbox es nicht die selectCheckAll Funktion eingeben.

Answer 1

Sie können die Anzahl, die überprüft werden kann, mit der Anzahl vergleichen, die geprüft wird, und das Kontrollkästchen check all entsprechend setzen. Das Folgende ist ein kurzer Hack in POJS, um die Methode zu demonstrieren, es gibt wahrscheinlich ein jQuery-Äquivalent.

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)">

Answer 2

Verwenden Sie jquery, um ein Änderungsereignis an Ihr Kontrollkästchen zu binden, und überprüfen Sie es anschließend. Ich weiß nicht, ob es irgendeinen anderen besseren Weg gibt, aber ich würde es auf diese Weise tun, bitte sag mir, ob es andere bessere Möglichkeiten gibt. Danke

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