[JS教程] input checkbox 用js实现全选/不选

一、实例HTML结构

<form>
<div><input name="selectall" value="全选" type="checkbox" id="selectall" /> <label for="selectall">全选/不选</label></div>
<p><input name="checkbox" value="Item1" type="checkbox" /> 1</p>
<p><input name="checkbox" value="Item2" type="checkbox" /> 2</p>
<p><input name="checkbox" value="Item3" type="checkbox" /> 3</p>
</form>

二、JS代码

<script>
//选择所有name相同的单选按钮
var targets=document.getElementsByName("checkbox");
//计算单选按钮的个数
var targetsLen=targets.length;
//设置全选按钮的状态为全未选
var status=0;
//绑定全选按钮的点击事件
document.getElementById("selectall").onclick=function(){
//如果当前是全未选状态的话
if (status==0){
//把每个单选按钮变成已选
for (var i=0; i<targetsLen; i++){
targets[i].checked=true;
}
//设置全选按钮的状态为已选
status=1;
}
//如果当前是全选状态的话
else {
//把每个单选按钮变成未选
for (var i=0; i<targetsLen; i++){
targets[i].checked=false;
}
//设置全选按钮的状态为未选
status=0;
}
}
</script>