2017-08-07 121 views
0

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

+0

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

+0

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

+0

'for(var i in checkboxes){$(“:checkbox”)。attr(“checked”,true);}'可能没有太大的作用。 – RobG

回答

0

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

+0

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

+0

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

+0

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

0

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