[做特效, 学JS] -- 09 正经的 全选和反选

猫哥的技术博客
1,184 阅读3分钟

最终效果

实现功能

  1. 点击全选, 所有的复选框全选, 全选文字变成全不选
  2. 点击全不选, 所有的复选框全部不选, 全不选文字变成全选
  3. 复选框可以单个点击
  4. 点击反选, 所有复选框状态取反
  5. 如果所有复选框选中, 则全选文字变成全不选
  6. 如果有复选框没有选中, 则全不选文字变成全选

最终代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>复选框（checkbox）全选/全不选/返选</title>
        <style>
            body,
            dl,
            dt,
            dd,
            p {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: Tahoma;
                font-size: 12px;
            }
            label,
            input,
            a {
                vertical-align: middle;
            }
            label {
                padding: 0 10px 0 5px;
            }
            a {
                color: #09f;
                text-decoration: none;
            }
            a:hover {
                color: red;
            }
            dl {
                width: 120px;
                margin: 10px auto;
                padding: 10px 5px;
                border: 1px solid #666;
                border-radius: 5px;
                background: #fafafa;
            }
            dt {
                padding-bottom: 10px;
                border-bottom: 1px solid #666;
            }
            dt label {
                font-weight: 700;
            }
            p {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <dl>
            <dt>
                <input type="checkbox" id="checkAll" />
                <label>全选</label>
                <a href="javascript:;">反选</a>
            </dt>
            <dd>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（一）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（二）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（三）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（四）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（五）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（六）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（七）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（八）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（九）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>选项（十）</label>
                </p>
            </dd>
        </dl>
        <center>
            1、切换全选/全不选文字；
            <br />
            <br />
            2、根据选中个数更新全选框状态；
        </center>
        <script src="demo.js"></script>
    </body>
</html>

window.onload = function(){
	// 找对象, 全选, 反选, 全部复选框
	var oSelectAll = document.querySelector("#checkAll");
	var oInvertSelect = document.querySelector("a");
	var aCheckbox = document.querySelectorAll('p>input');
	var oSelectAllLabel = document.querySelector('dt>label');
	//全选按钮的点击事件
	oSelectAll.onclick = function(){
		for(var i = 0;i<aCheckbox.length;i++){
			aCheckbox[i].checked = this.checked;
		}
		isSelectAll();
	}


	for (var i = 0; i < aCheckbox.length; i++) {
		aCheckbox[i].onclick = isSelectAll;
	}


	// 判断所有复选框是否全部选中
	// 如果全部选中, 第一个复选框勾上, 文字改成"全不选"
	// 如果没有全部选中, 第一个复选框, 应该没有选中, 文字应该是"全选"
	function isSelectAll(){
		var count = 0;
		for (var i = 0; i < aCheckbox.length; i++) {
			if(aCheckbox[i].checked){
				count++;
			}
		}
		if(count == aCheckbox.length){
			oSelectAll.checked = true;
			oSelectAllLabel.innerHTML = "全不选";
		}else{
			oSelectAll.checked = false;
			oSelectAllLabel.innerHTML = "全选";
		}
	}

	// 反选, 所有复选框状态取反
	oInvertSelect.onclick = function(){
		for (var i = 0; i < aCheckbox.length; i++) {
			aCheckbox[i].checked = !aCheckbox[i].checked;
		}
		isSelectAll();
	}
}

专栏地图

avatar
文章
阅读
粉丝