Question

怎么用JavaScript实现复选框的全部选择和全部取消

怎么用JavaScript实现复选框的全部选择和全部取消，比如给出几个复选框，点按钮全部选择，点另一个按钮全部取消，要求在JavaScript中用循环语句写，怎么写？？

Answer 1

思路：获取复选框对象→循环设置ckecked属性值（true表示选中，false表示未选中）。关键代码：

obj.checked = true | false;

实例演示如下：

1、HTML结构

<input type="checkbox" name="test" value="1">item-1
<input type="checkbox" name="test" value="2">item-2
<input type="checkbox" name="test" value="3">item-3<br>
<input type="checkbox" name="test" value="4">item-4
<input type="checkbox" name="test" value="5">item-5<br>
<input type="button" value="全选" onclick="setChecked(true)"><input type="button" value="取消" onclick="setChecked(false)">

2、javascript代码

function setChecked(option){
	var cks = document.getElementsByName("test");
	for(i=0;i<cks.length;i++){
		cks[i].checked = option;
	}
}

3、效果演示

Answer 2

<input id="cbHeaderChecked" name="cbHeaderChecked" onclick="return SelectChecked()" type="checkbox" /><input id="cbChecked" runat="server" name="cbChecked" type="checkbox" /><input id="cbChecked" runat="server" name="cbChecked" type="checkbox" /><input id="cbChecked" runat="server" name="cbChecked" type="checkbox" /><script type="text/javascript">function SelectChecked() {
var t = document.getElementsByTagName("input"); for (var i = 0; i < t.length; i++) {
if (t[i].type == "checkbox" && t[i].name.indexOf("cbChecked") != -1) {
t[i].checked = document.all.item("cbHeaderChecked").checked;
}
}
}</script>

Answer 3

<form>
<input type="checkbox" name="xx[]" value="1" />1

<input type="checkbox" name="xx[]" value="2" />2

<input type="checkbox" name="xx[]" value="3" />3

<input type="checkbox" name="xx[]" value="4" />4

<input type="checkbox" name="xx[]" value="5" />5

<input type="checkbox" name="xx[]" value="6" />6

<input type="checkbox" name="xx[]" value="7" />7

<input type="checkbox" name="xx[]" value="8" />8

<input type="button" id="checkall" value="全选" />
<input type="button" id="checknone" value="全不选" />
</form>
<script type="text/javascript">
function checkall(obj, name, check) {
var form = obj.form;
var checkboxes = form[name];
for (var i = 0, len = checkboxes.length; i < len; i++) {
checkboxes[i].setAttribute("checked", check);
}
}
document.getElementById("checkall").onclick = function() {checkall(this, "xx[]", true);};
document.getElementById("checknone").onclick = function() {checkall(this, "xx[]", false);};
</script>