如何实现全选全不选

最新推荐文章于 2023-04-03 21:20:58 发布

罗倩楠_666

最新推荐文章于 2023-04-03 21:20:58 发布

阅读量187

点赞数

分类专栏： JS demo

本文链接：https://blog.csdn.net/sunbeibei00000/article/details/112957380

版权

JS demo 专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <input type="checkbox" value="全选" id="ckAll" />水果</br>
    <div class="box">
        <input type="checkbox" value="苹果" id="apple" />苹果
        <input type="checkbox" value="香蕉" id="bann" />香蕉
        <input type="checkbox" value="橘子" id="origin" />橘子
    </div>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        //给所有 .box input 元素添加 checked = ckAll 当前的状态；
        //prop('checked',value) ,第一个值获取属性，第二个值：设置属性值。prop只有一个参数时，表示获取元素属性。
        $('#ckAll').click(function () {
            $('.box input').prop('checked', $(this).prop('checked'));
        });
        $('.box input').click(function () {
            //each 便利每一个元素，让其执行该函数
            $('.box input').each(function () {
                if (!$(this).prop('checked')) {
                    $('#ckAll').prop('checked', false);
                    //有一个不满足就 跳出该循环，避免执行下面
                    return false;
                } else {
                    $('#ckAll').prop('checked', true);
                }
            })
        })</script>
</body>

</html>

罗倩楠_666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何实现全选全不选

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <input type="checkbox" value="全选" id="ckAll" />水果</br> <div class="box"> <in.
复制链接

扫一扫