<input type="checkbox" name="checkC" onClick="resAll()">1
<input type="checkbox" name="checkC" onClick="resAll()">2
<input type="checkbox" name="checkC" onClick="resAll()">3
<input type="checkbox" name="checkC" onClick="resAll()">4
<input type="checkbox" name="checkC" onClick="resAll()">5
<input type="checkbox" name="checkC" onClick="resAll()">6
<input type="checkbox" name="checkC" onClick="resAll()">7
<input type="checkbox" name="all" id="all" onClick="checkAll()">全选
<script type="text/javascript" language="javascript">
function checkAll(){
var d = document,
items=d.getElementsByName("checkC"),
itemall = d.getElementById("all"),
len = items.length;
for(var i=0;i<len;i++){
items[i].checked=itemall.checked;
}
}
function resAll(){
var d = document,
items=d.getElementsByName("checkC"),
itemall = d.getElementById("all"),
ite=0;
for(var i=0;i<items.length;i++){
if(items[i].checked){
ite++;
}
}
if(ite==items.length-1&&itemall.checked){
itemall.checked=false;
}
if(ite==items.length&&!itemall.checked){
itemall.checked=true;
}
}
</script>
注意：getElementsByName的兼容性问题。
1.name 和 id 属性一起抓
<input type="checkbox" name="checkC" onClick="resAll()">1
<input type="checkbox" id="checkC" onClick="resAll()">2
IE下：document.getElementsByName.length =2
FF下：document.getElementsByName.length =1
2.如果标签没有name属性不会抓取
<input type="checkbox" name="checkC" onClick="resAll()">1
<input type="checkbox" id="checkC" onClick="resAll()">2
<p name="checkC">3</p>
IE下：document.getElementsByName.length =2
FF下：document.getElementsByName.length =3
考虑到IE这种问题，尽量避免使用getElementsByName
尽量使用： document.getElementsByTagName('input')
<div id="box" style="height:20px; background-color:#ccc;">
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3
<input type="checkbox">4
<input type="checkbox">5
<input type="checkbox">6
<input type="checkbox">7
<input type="checkbox" id="all2">全选
</div>
<script type="text/javascript">
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
if (event.target){
return event.target;
} else {
return event.srcElement;
}
}
}
EventUtil.addHandler(window,"load",function(){
var box = document.getElementById('box'),
dga = document.getElementById('all2'),
boxItem= box.getElementsByTagName('input'),
len = boxItem.length-1;
EventUtil.addHandler(box,'click',function(e){
var e = EventUtil.getEvent(e),target = EventUtil.getTarget(e);
if(target.nodeName =='INPUT' && target.id =='all2'){
if(target.checked){
for(var i=0;i<len;i++){
boxItem[i].checked=true;
}
}
else{
for(var i=0;i<len;i++){
boxItem[i].checked = false;
}
}
}
else{
var ite=0;
for(var i=0;i<len;i++){
if(boxItem[i].checked){
ite++;
}
}
if(ite==len-1){
dga.checked=false;
}
if(ite==len){
dga.checked=true;
}
}
});
})
</script>
