javascript checkbox 全选

<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>