checkbox选择框关于全选框与全不选

最新推荐文章于 2022-10-28 13:18:26 发布

春风又一季

最新推荐文章于 2022-10-28 13:18:26 发布

阅读量1k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_40183281/article/details/88317009

版权

javascript 专栏收录该内容

27 篇文章 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">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="check_all">全选</br>
    <input type="checkbox" class="check_item">1</br>
    <input type="checkbox" class="check_item">2</br>
    <input type="checkbox" class="check_item">3</br>
    <input type="checkbox" class="check_item">4</br>

</body>
<script>
    $("#check_all").click(function () {//鼠标点击事件
        $(".check_item").prop("checked", $(this).prop("checked"))//所有类为check_item的属性打√
        //选中的时候返回true，否则为false
        //使得id为check_all的原生属性值与class为check_item的保持一致
    });
    $(document).on("click", ".check_item", function () {//对class绑定一个点击事件
        var flag = $(".check_item:checked").length == $(".check_item").length;
        //如果选中的框数等于总框数的，那么flag的结果返回true
        $("#check_all").prop("checked",flag)
        //这时候让id为check_all，也就是全选按钮也为true，那么全选按钮也就打√了
    })

</script>
</html>

只要考察prop与checked的用法
只要有一个不选，那么全选的按钮就会为空
在这里插入图片描述
1234全部都选了，全选也就选上了

春风又一季

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
checkbox选择框关于全选框与全不选

&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"&gt;
复制链接

扫一扫

专栏目录