用js实现复选框的全选和取消全选的代码_全选网页中的复选框代码-CSDN博客

上图是代码的运行效果图，完整的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>全选和取消全选</title>
	</head>
	<body>
		
		<input type="checkbox" />全选<br />
		<input type="checkbox" />极限挑战<br />
		<input type="checkbox" />男人帮<br />
		<input type="checkbox" />欢乐喜剧人<br />
		
		<script>
			var num = 0;
			var oInput = document.getElementsByTagName("input");
			oInput[0].onclick = function () {//全选
				if(!this.checked){
					for(var i=1;i<oInput.length;i++){
						oInput[i].checked = false;
					}
				}else{
					for(var i=1;i<oInput.length;i++){
						oInput[i].checked = true;
					}
				}
			}
			
			//单击某一项就取消全选i从1开始
			for(var i=1;i<oInput.length;i++){
				oInput[i].onclick = function () {
					if(!this.checked){
						num --;
						oInput[0].checked = false;
					}else{
						num ++;
						if(oInput.length-1 == num){
							oInput[0].checked = true;
						}
					}
				}
			}
		</script>
	</body>
</html>

另外一种实现方式代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrap{
            width: 300px;
            margin: 100px auto;
        }
        table{
            /*合并表格的边框*/
            border-collapse: collapse;
            /*设置相邻单元格的边框间的距离*/
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th{
            background-color: #094;
            font: bold 16px "微软雅黑";
        }
        td{
            font: 14px "微软雅黑";
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
        <script>
            window.οnlοad=function () { 
                var topInp = document.getElementById("theadInp");
                var tbody = document.getElementById("tbody");
                var botInpArr = tbody.getElementsByTagName("input");
                
                
                // 绑定事件简化版
                topInp.onclick = function () {
                    // 被点击的input按钮的checked属性值，应该直接作为下面所有的input按钮的checked值
                    for(var i=0;i<botInpArr.length;i++){
                        botInpArr[i].checked = this.checked;
                    }
                }

                // 然后为下面的每个Input绑定事件
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].onclick = function () {
                        //开闭原则
                        var bool = true;
                        //检测每一个input的checked属性值
                        for(var j=0;j<botInpArr.length;j++){
                            if(botInpArr[j].checked === false){
                                bool = false;
                            }
                        }
                        topInp.checked = bool;
                    }
                }
            }
            
            
        </script>
        <div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="theadInp">
                        </th>
                        <th>菜名</th>
                        <th>饭店</th>
                    </tr>
                </thead><!--头部结束-->
                <tbody id="tbody">
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>地三鲜</td>
                        <td>田老师</td>
                    </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西红柿鸡蛋</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>醋溜土豆丝</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>萝卜干干炒黄豆儿</td>
                    <td>田老师</td>
                </tr>
                </tbody>
            </table>
        </div>
</body>
</html>