<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<style type="text/css">
.box{width: 250px;margin: 0 auto;}
h3{text-align: center;}
input{margin-right:14px; }
</style>
</head>
<body>
<div class="box">
<fieldset>
<h3>你最喜欢的球类运动</h3><hr/>
<form>
<input type="checkbox" name="item[]" >篮球
<input type="checkbox" name="item[]" >足球
<input type="checkbox" name="item[]" >羽毛球<br/>
<input type="checkbox" name="item[]" >桌球
<input type="checkbox" name="item[]" >马球
<input type="checkbox" name="item[]" >乒乓球<hr/>
</form>
<input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">我都喜欢</label>
<input type="checkbox" id="uncheckall" onclick="uncheckAll()"><label for="uncheckall">我都不喜欢</label>
</fieldset>
</div>
<script type="text/javascript">
function checkAll(){
var checkall,item;
checkall=document.getElementById('checkall')
item=document.getElementsByName("item[]")
for(var i=0;i<item.length;i++){
if(checkall.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
// function uncheckAll(){
// var checkall,item;
// checkall=document.getElementById('uncheckall')
// item=document.getElementsByName("item[]")
// for(var i=0;i<item.length;i++){
// if(uncheckall.checked){
// item[i].checked=false;
// }
// }
}
</script>
</body>
</html>
设想是用两个框,一个是全选,一个是全部取消勾选,但是好像冲突了,