JavaScript 实现表格复选框全选

效果如图所示： 

当用户选择全选按钮时，所有复选框被选中。  当任一复选框被取消选中，则全选按钮被取消选中。

具体代码如下所示：

cameraMng.html(主要代码)

<table class="cameraTable" >
	<tr>
		<th><input type="checkbox" id="checkAllTop"/></th>
		<th>IP地址</th>
		<th>端口</th>
		<th>设备型号</th>
		<th>厂商</th>
		<th>协议类型</th>
		<th>账号</th>
		<th>密码</th>
	</tr>
	<tr>
		<td><input type="checkbox" class="cameraCheckBoxTop"/></td>
		<td>192.168.2.2</td>
		<td>80</td>
		<td>IPC-HF8229F</td>
		<td>Dahua</td>
		<td>Onvif</td>
		<td>admin</td>
		<td>admin</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="cameraCheckBoxTop"/></td>
		<td>192.168.2.2</td>
		<td>80</td>
		<td>IPC-HF8229F</td>
		<td>Dahua</td>
		<td>Onvif</td>
		<td>admin</td>
		<td>admin</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="cameraCheckBoxTop"/></td>
		<td>192.168.2.2</td>
		<td>80</td>
		<td>IPC-HF8229F</td>
		<td>Dahua</td>
		<td>Onvif</td>
		<td>admin</td>
		<td>admin</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="cameraCheckBoxTop"/></td>
		<td>192.168.2.2</td>
		<td>80</td>
		<td>IPC-HF8229F</td>
		<td>Dahua</td>
		<td>Onvif</td>
		<td>admin</td>
		<td>admin</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="cameraCheckBoxTop"/></td>
		<td>192.168.2.2</td>
		<td>80</td>
		<td>IPC-HF8229F</td>
		<td>Dahua</td>
		<td>Onvif</td>
		<td>admin</td>
		<td>admin</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="cameraCheckBoxTop"/></td>
		<td>192.168.2.2</td>
		<td>80</td>
		<td>IPC-HF8229F</td>
		<td>Dahua</td>
		<td>Onvif</td>
		<td>admin</td>
		<td>admin</td>
	</tr>
</table>

global.js(公共方法，辅助文件)

/* 共享onload事件 */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

/* 多次获取通过id获取时，尽量用变量保存，不多次调用 */
function $$(id) {
    return document.getElementById(id);
}


//全勾选
function selectAll(isChecked, className) {
    var checkBoxes = document.getElementsByClassName(className); //获取所有复选框（除全选外）
    for(var i = 0;i < checkBoxes.length; i++) {
        if(isChecked) {
            checkBoxes[i].checked = true;
        } else {
            checkBoxes[i].checked = false;
        }
    }
}

/*
* 当任一checkBox勾选，查看是否所有checkbox都已经选中
* 是：勾选全选按钮  否：取消勾选全选按钮
*/
function checkIsSelected(checkAllName, checkBoxName) {
    var checkBoxes = document.getElementsByClassName(checkBoxName); //获取所有复选框（除全选外）
    var selectAllBox = $$(checkAllName);     //获取全选复选框
    var ischecked = true;
    for(var i = 0;i < checkBoxes.length; i++) {
        if(!checkBoxes[i].checked) {
            ischecked = false;
            break;
        }
    }
    if(ischecked) {
        selectAllBox.checked = true;
    } else {
        selectAllBox.checked = false;
    }
}

最主要的文件cameraMng.js

/*初始化相机管理界面*/
function initCameraMng() {
    var checkAllTop = $$("checkAllTop");        //相机搜索列表全选按钮
	//当单击全选按钮时触发
    checkAllTop.onclick = function() {
        if(checkAllTop.checked) {
            selectAll(true, "cameraCheckBoxTop");
        } else {
            selectAll(false, "cameraCheckBoxTop");
        }
    }
	 //当单机任一选择复选框
    var checkBoxesTop = document.getElementsByClassName("cameraCheckBoxTop");
    for(var i = 0;i < checkBoxesTop.length;i++) {
        checkBoxesTop[i].onclick = function() {
            checkIsSelected("checkAllTop", "cameraCheckBoxTop");
        }
    }
}

addLoadEvent(initCameraMng);

最后不要忘了在html中引用这两个js文件

<script src="../scripts/global.js"></script>
<script src="../scripts/cameraMng.js"></script>

好了，基本代码就是这些。

PS：初学JS，多多指教。