[读码时间] 复选框选择

最新推荐文章于 2024-09-20 11:38:47 发布

weixin_30781775

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量46

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sx00xs/p/6440834.html

版权

说明：代码取自网络，注释为笔者学习时添加！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>复选框选择</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>
    <script>
        window.onload = function () {
            var oA = document.getElementsByTagName("a")[0];//获取a元素中的第一个
            var oInput = document.getElementsByTagName("input");//获取所有input元素引用
            var oLabel = document.getElementsByTagName("label")[0];//获取label元素中的第一个
            var isCheckAll = function () {//检测所有选项是否全部被选中
                for (var i = 1, n = 0; i < oInput.length; i++) {//n为计数器，留意i的值从1开始
                    oInput[i].checked && n++; //遍历检测每个input元素的checked值，如勾选，则n加1
                }
                oInput[0].checked = n == oInput.length - 1;//如计数器n的值等同所有input元素的数量，则第一个input被选中，即全选按钮
                oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选";//切换文本
            };
            oInput[0].onclick = function () {//给全选按钮添加click事件
                for (var i = 1; i < oInput.length; i++) {//留意i的值从1开始
                    oInput[i].checked = this.checked;
                }
                isCheckAll();
            };
            oA.onclick = function () { //给反选按钮添加click事件
                for (var i = 1; i < oInput.length; i++) {//留意i的值从1开始
                    oInput[i].checked = !oInput[i].checked;//反转选中状态
                }
                isCheckAll();
            };
            for (var i = 1; i < oInput.length; i++) { //监控选项个数，更新全选框状态.留意i的值从1开始
                oInput[i].onclick = function () {
                    isCheckAll();
                }
            }

        }
    </script>
</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>
</body>
</html>