Question

如果选中了所有其他复选框，则需要检查我的selectAll复选框。知道如何在javascript中执行此操作吗？

我的javascript代码：

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代码：

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

当我选中一个复选框时，它不会进入selectCheckAll函数。

Answer 1

使用jquery将更改事件绑定到复选框，然后检查它。我不知道是否还有其他更好的方法，但我是这样做的，请告诉我是否还有其他更好的方法。感谢

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

您可以比较可以检查的号码与检查的号码，并相应地设置全部勾选复选框。以下是POJS中用于演示该方法的快速入侵，可能是jQuery等价物。

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

如果选中所有复选框，则选中要检查的全部复选框

2 个答案: