<table>
<tr>
<td><input type="checkbox" name="hobby"></td>
<td>篮球</td>
</tr>
<tr>
<td><input type="checkbox" name="hobby" ></td>
<td> 网球</td>
</tr>
<tr>
<td><input type="checkbox" name="hobby" ></td>
<td>羽毛球</td>
</tr>
<tr>
<td><input type="checkbox" name="hobby"></td>
<td> 足球</td>
</tr>
<tr>
<td>全选<input type="checkbox" id="all_id" onclick="checkAll()" ></td>
<td>反选 <input type="checkbox" id="other_id" onclick="otherAll()" ></td>
</tr>
</table>
</body>
<script type="text/javascript">
//1把所有的框找到
var hobbys=document.getElementsByName("hobby");
//2找到全选和反选
var all=document.getElementById("all_id");
var other=document.getElementById("other_id");
function checkAll(){
//当触发全选时，反选框失效
other.checked=false;
for(var i=0;i<hobbys.length;i++){
var hobby_element=hobbys[i];
hobby_element.checked=true;
}
}
function otherAll(){
//当触发反选时，全选框失效
all.checked=false;
for(var i=0;i<hobbys.length;i++){
var hobby_element=hobbys[i];
hobby_element.checked=!hobby_element.checked;
}
}
</script>
结果：