javascript 的点击选中checkbox(原始js)

最新推荐文章于 2022-08-07 17:35:05 发布

柑子~

最新推荐文章于 2022-08-07 17:35:05 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： checkbox（原生js）

本文链接：https://blog.csdn.net/apppws/article/details/84670893

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

*话不多说上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选和反选</title>
    <style>
        body{
            padding: 0;
            margin: 0 ;
            background-color: #cdcdcd;
        }
        dl{
            width: 300px;
            height: 400px;
            background-color: #fff;
            margin: 150px auto;

        }
		dt{ 
            line-height: 40px; 
            border-bottom: 1px solid #333;
             text-align: left;
        }
        #checkNone{
            width: 10px;
            height: 10px;
            background-color: skyblue;
        }
		dd p{ 
            line-height: 35px; 
            }
		.info{ 
            width: 475px;
            line-height: 2em;
            text-align: center; 
            font-size: 12px; 
            background: #f2f2f2; 
            margin: 0 auto; }
    </style>
</head>

<body>
    <dl>
        <dt>
            <input type="checkbox" id="checkAll"><label>全选</label>
            <a href="#" id="checkNone">反选</a>
        </dt>
        <dd>
            <p><label> <input type="checkbox" /> 选择(一)</label></p>
            <p><label> <input type="checkbox" /> 选择(二)</label></p>
            <p><label> <input type="checkbox" /> 选择(三)</label></p>
            <p><label> <input type="checkbox" /> 选择(四)</label></p>
            <p><label> <input type="checkbox" /> 选择(五)</label></p>
            <p><label> <input type="checkbox" /> 选择(六)</label></p>

        </dd>
    </dl>
</body>

</html>
<script>
    // 全选
    var checkAll = document.getElementById('checkAll');
    // 反选
    var checkNone = document.getElementById('checkNone');
    // 选择框
    var inputs = document.getElementsByTagName('input');
    // console.log(inputs);
    // 取出第一个
    var label = document.getElementsByTagName('label')[0];
    // console.log(label);

    // 判断选择
    function isCheckAll() {
        // 循环文本框 
        for (var i = 1, n = 0; i < inputs.length; i++) {
            inputs[i].checked && n++;
        }
        inputs[0].checked = n == inputs.length - 1;
        label.innerHTML = inputs[0].checked ? "全不选" : "全选";
        // console.log(label.innerHTML);
    }

    // 全选或者全不选
    checkAll.onclick = function () {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = this.checked
        }
        isCheckAll();
    }
    // 反选
    checkNone.onclick = function () {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = !inputs[i].checked
        }
        isCheckAll();
    }
    //根据复选个数更新全选框状态
    for (var i = 1; i < inputs.length; i++) {
        // 如果input 都选中了 那么调用全选的判断函数
        inputs[i].onclick = function () {
            isCheckAll();
        }
    }

</script>

柑子~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript 的点击选中checkbox(原始js)

*话不多说上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
复制链接

扫一扫