我正在为Apache Wicket页面编写一些Javascript,并试图创建一个"Select All"复选框,当选中时,将检查所有其他复选框,然后禁用它们。类似地,当取消选中时,它将启用和取消选中所有复选框。这个复选框将不会被其他复选框更新(也就是说,选中所有其他复选框将不会选中select all框)。
我可以用复选框完成我想要的。checked = selectAll。检查,但它似乎没有传递一个点击事件,我需要在Wicket的一些功能。使用checkbox.click()为我提供了我需要的单击事件,但在重新启用复选框后似乎不会运行。
var selectAll = document.getElementById("all");
function checkbox_changed() {
checkboxes = document.getElementsByName('foo');
for (var i in checkboxes) {
var checkbox = checkboxes[i];
checkbox.disabled = false;
if (checkbox.checked !== selectAll.checked) {
//checkbox.checked = selectAll.checked;
checkbox.click();
}
if (selectAll.checked) {
checkbox.disabled = true;
}
}
}
<form>
<input type="checkbox" id="all" onchange="checkbox_changed()">Select All
<br>
<br>
<input type="checkbox" name="foo">One
<br>
<input type="checkbox" name="foo">Two
<br>
<input type="checkbox" name="foo">Three
<br>
<input type="checkbox" name="foo">Four
<br>
</form>
为了方便起见,下面是上面的示例:https://jsfiddle.net/ytggu5as/
编辑:我刚刚意识到这只发生在Firefox(我使用39.0)和更新的问题。它似乎在Chrome和Safari(没有测试过任何其他)。知道为什么会发生这种情况吗?知道如何解决吗?如果没有,是否有比.checked
更好的替代.click()
?
在之后调用click()
重新启用复选框不起作用的事实似乎是Firefox的一个错误。
您可以通过在第一次传递中设置disabled=false
来解决这个错误,然后在setTimeout(..., 0)
中再次遍历复选框并根据需要调用click()
。