如果所有复选框都选中，选中所有复选框

问题描述：

如果选中其他所有复选框，则需要选中我的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功能。

做一些基本的调试。 **看看你的HTML **。你有一些JSP：它产生了什么HTML？问题是它没有生成你想要的HTML，或者是你想要的HTML没有你想要的效果？不要只看JS和服务器端代码。缩小问题范围。 – Quentin

在浏览器的开发人员工具中打开控制台。是否显示任何错误？当你点击复选框时怎么样？ – Quentin

'for（var i in checkboxes）{$（“：checkbox”）。attr（“checked”，true）;}'可能没有太大的作用。 – RobG

答

您可以比较可以检查的数字和检查的数字，并相应地设置全选复选框。以下是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)">

我可以使用setCheckAll函数，以便在jsp中加载页面时完成此检查吗？ – user3762810

@ user3762810-我希望你会用jQuery重写这个函数。你可以随时运行它，但我也希望复选框被加载一个合适的* checked *值，所以它只需要响应用户操作而运行。 – RobG

我设法做到了。感谢您的帮助。 – user3762810

答

使用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); 
});

如果所有复选框都选中，选中所有复选框

相关推荐