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

时间  2019-11-17
标签 特效 正经 全选 栏目 JavaScript 繁體版
原文   原文链接

最终效果

实现功能

  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>
            一、切换全选/全不选文字；
            <br />
            <br />
            二、根据选中个数更新全选框状态；
        </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();
	}
}
复制代码

专栏地图

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程