checkbox 的全选功能实现，支持半勾选状态

支持IE浏览器(测试时至少I8支持)，效果图：

 

html 表头部分：

  <tr>
       <td><input type="checkbox" name="selectAll" id="selectAll" />全选</td>
  </tr>

html table部分

  <tr>
      <td><input type="checkbox" name="serial_no" value=""/>苹果</td>
  </tr>
  <tr>
      <td><input type="checkbox" name="serial_no" value=""/>香蕉</td>
  </tr>
  <tr>
      <td><input type="checkbox" name="serial_no" value=""/>葡萄</td>
  </tr>

js代码：

因为要实时监控，所以要放在ready函数中去写

	$(function(){
		$("#selectAll").click(function() {
			if ($(this).is(":checked")) { // 全选
				$("input[name='serial_no']").attr("checked", true);
			} else {                      // 取消全选
				$("input[name='serial_no']").attr("checked", false);
			}
		});
		
		$("input[name='serial_no']").click(function(){
			var allSel = true;
			var selCnt = 0;
			$("input[name='serial_no']").each(function() {
				if(!$(this).is(":checked")){
					allSel = false;
				}else{
					selCnt++;
				}
			});
			
			var itn = document.getElementById('selectAll');
			if(!allSel){
				itn.indeterminate = true;
			}else{
				itn.indeterminate = false;
				$("#selectAll").attr("checked", true);
			}
			if( selCnt == 0 ){
				itn.indeterminate = false;
				$("#selectAll").attr("checked", false);
			}
		});
	});