HTML布局：利用JS技术获取input标签，再利用input的checked属性进行判断操作，实现全选功能：
<body>
<input type="checkbox" id="all" onclick="checkAll()"/>全选<br />
<input type="checkbox" name="select" onclick="checkSelect2()"/>子选项1<br />
<input type="checkbox" name="select" onclick="checkSelect2()"/>子选项2<br />
<input type="checkbox" name="select" onclick="checkSelect2()"/>子选项3<br />
<input type="checkbox" name="select" onclick="checkSelect2()"/>子选项4
</body>
<script type="text/javascript">
var all=document.getElementById("all");
var s=document.getElementsByName("select");
//全选框控制子选框
function checkAll(){
for (var i=0;i<s.length;i++) {
if(all.checked){
s[i].checked=true;
}else{
s[i].checked=false;
}
}
}
//子选框反选全选框：方法1
function checkSelect(){
for (var i=0;i<s.length;i++) {
if(s[i].checked==false){
all.checked=false;
break;
}else{
all.checked=true;
}
}
}
//子选框反选全选框：方法2
function checkSelect2(){
var count=0;
for (var i=0;i<s.length;i++) {
if(s[i].checked){
count++;
}
}
if(count==s.length){
all.checked=true;
}else{
all.checked=false;
}
}
</script>