使用Jquery实现全选，反选，不选的功能

最新推荐文章于 2022-03-18 11:07:09 发布

hzHZKJ

最新推荐文章于 2022-03-18 11:07:09 发布

阅读量160

点赞数

分类专栏：菜鸟入门文章标签： jquery

本文链接：https://blog.youkuaiyun.com/hzHZKJ/article/details/112155429

版权

菜鸟入门专栏收录该内容

10 篇文章

订阅专栏

使用Jquery实现全选，反选，不选的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 70px;
            height: 50px;
            border-radius: 10px;
            border: 1px solid black;
            background: #9b59b6;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="" id="1">
    <input type="checkbox" name="" id="2">
    <input type="checkbox" name="" id="3">
    <input type="checkbox" name="" id="4">
    <input type="checkbox" name="" id="5">

    <div id="all">全选</div>
    <div id="res">反选</div>
    <div id="nos">不选</div>

    <script src="../js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $('#all').click( function () {
                $('input:checkbox').prop("checked",true);
            })
            $('#res').click(function () {
                $('input:checkbox').each((i,e)=>{
                    $(e).prop('checked',!$(e).prop('checked'));
                })
            })
            $('#nos').click(function () {
                $('input:checkbox').prop("checked",false);
            })
        })
    </script>
</body>
</html>