<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框全选/反选效果实现</title>
</head>
<body>
<dl>
<dt><input type="checkbox" id="items" /><label>全选</label><a href="javascript">反选</a></dt>
<dd>
<p><input type="checkbox" name="item" /><label>选项（一）</label></p>
<p><input type="checkbox" name="item" /><label>选项（二）</label></p>
<p><input type="checkbox" name="item" /><label>选项（三）</label></p>
<p><input type="checkbox" name="item" /><label>选项（四）</label></p>
<p><input type="checkbox" name="item" /><label>选项（五）</label></p>
<p><input type="checkbox" name="item" /><label>选项（六）</label></p>
</dd>
</dl>
<script type="text/javascript">
var aInput = document.getElementsByTagName("input");
var aBack = document.getElementsByTagName("a")[0];
var aLabel = document.getElementsByTagName("label")[0];
var allInput = aInput[0];
//全选设置,当点击事件发生时候，如果被选择全部选中，并且文本内容改变
allInput.function(){
if(aInput[0].checked){
for(var i=1;i<aInput.length;i++){
aInput[i].checked = true;
}
aLabel.innerHTML = "全不选";
}
else{
for(var i=1;i<aInput.length;i++){
aInput[i].checked = false;
}
aLabel.innerHTML = "全选";
}
}
//反选设置，选中的内容是原本内容的取反
aBack.function(){
for(var i=1;i<aInput.length;i++){
aInput[i].checked = !aInput[i].checked;
}
}
</script>
</body>
</html>
143
11-23
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
