我有这些复选框:
'<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">';
'<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">';
'<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">';
我可以通过叮叮当当来检查或取消选中。
现在我正在尝试添加一个复选框,单击时会立即选中或取消选中所有以前的复选框。
'<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">'
单击复选框以立即选中或取消选中所有复选框“toggleable”时,要执行的JS代码是什么?
答案 0 :(得分:5)
这是一个关于如何在纯JavaScript中使用它的示例。
var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
var checked = this.checked;
var otherCheckboxes = document.querySelectorAll(".toggleable");
[].forEach.call(otherCheckboxes, function(item) {
item.checked = checked;
});
});
<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
<br/>
<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">
<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">
<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">
答案 1 :(得分:0)
通过JS验证是否检查了特定checkbox
。它必须检查所有这些。
JS Demo Below:UPDATE
刚刚在您的输入中添加了id
。
function checkAll(x) {
if(x.checked == true){
document.getElementById('c1').checked = true;
document.getElementById('c2').checked = true;
document.getElementById('c3').checked = true;
}else{
document.getElementById('c1').checked = false;
document.getElementById('c2').checked = false;
document.getElementById('c3').checked = false;
}
}
&#13;
Multiple Check Box Below:
<br>
<input type="checkbox" name="checkBox1" value="checked" class="toggleable" id="c1">
<input type="checkbox" name="checkBox2" value="checked" class="toggleable" id="c2">
<input type="checkbox" name="checkBox3" value="checked" class="toggleable" id="c3">
</br>
Check below to Check them all:
</br>
<input type="checkbox" name="check_uncheck_all" onchange='checkAll(this);' value="false" id="id_check_uncheck_all">
&#13;
下面的JQuery演示:
$('#checkAll').click(function () {
$('input:checkbox').prop('checked', this.checked);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" > Check All
</br>
<input type="checkbox" id="checkItem"> Item 1
<input type="checkbox" id="checkItem"> Item 2
<input type="checkbox" id="checkItem"> Item3
&#13;
答案 2 :(得分:0)
试试吧
$(document).ready(function() {
$(".toggleable").click(function() {
var checkboxes = $(".toggleable");
if($(this).prop("checked")) checkboxes.prop("checked",true);
else checkboxes.prop("checked",false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkBox1" class= "toggleable">
<input type="checkbox" name="checkBox2" class= "toggleable">
<input type="checkbox" name="checkBox3" class= "toggleable">