目标需求:按钮点击实现复选框的全选、全不选与反选
分析:获取到复选框数组后,循环对复选框的选择状态赋值,全选赋true值,全不选赋false值,反选赋其相反值
页面大致如下:
页面部分代码如下:
<input type="checkbox" name="likes" value="篮球">篮球<br />
<input type="checkbox" name="likes" value="唱歌">唱歌<br />
<input type="checkbox" name="likes" value="美术">美术<br />
<input type="checkbox" name="likes" value="弹琴">弹琴<br />
<input type="checkbox" name="likes" value="游泳">游泳<br />
<input type="button" onclick="likeall(true)" value="全部选择">
<input type="button" onclick="likeall(false)" value="全部取消">
<input type="button" onclick="reverseall()" value="反向选择">
其中,全选与全不选均调用likeall方法,全选传true,全不选传false:
function likeall(bools){
var likearr = document.getElementsByName("likes");
for(var i = 0;i < likearr.length; i++)
{
likearr[i].checked = bools;
}
}
反选调用reverseall方法,不传值,循环判断选中状态,并赋相反值:
function reverseall(){
var likearr = document.getElementsByName("likes");
for(var i = 0;i < likearr.length; i++)
{
likearr[i].checked = likearr[i].checked == false ? true:false;
}
}