复选框

最新推荐文章于 2023-07-21 16:06:07 发布

栗子鱿鱼

最新推荐文章于 2023-07-21 16:06:07 发布

阅读量71

点赞数

分类专栏： # js

本文链接：https://blog.csdn.net/qq_45083168/article/details/112893938

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

- 全选或者全取消复选框

全选或者全取消复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script type="text/javascript">
        window.onload = function () {
            var first = document.getElementById("qx")
            var aihao = document.getElementsByName("aihao")
            first.onclick = function () {
                for (var i = 0; i < aihao.length;i++) {
                    aihao[i].checked = first.checked
                }
            }

            var all = aihao.length
            for (var i = 0;i < aihao.length;i++) {
                aihao[i].onclick = function () {
                    var checkedCount = 0
                    for (var i = 0; i< aihao.length;i++) {
                        if (aihao[i].checked) {
                            checkedCount++;
                        }
                    }
                    first.checked = (all == checkedCount)
                }
            }
        }
    </script>
    
    <input type="checkbox" id="qx">全选 <br>
    <input type="checkbox" name="aihao" value="smoke">吸烟
    <input type="checkbox" name="aihao" value="smoke">喝酒
    <input type="checkbox" name="aihao" value="smoke">烫头

</body>
</html>

栗子鱿鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框

文章目录全选或者全取消复选框全选或者全取消复选框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script type="text/javascript"> window.onload = function
复制链接

扫一扫

专栏目录