使用jQuery实现复选框的全选、反选和不选

最新推荐文章于 2024-05-18 20:34:17 发布

唯有烟火知故人

最新推荐文章于 2024-05-18 20:34:17 发布

阅读量436

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_44409290/article/details/112005434

版权

使用jQuery实现复选框的全选、反选和不选

通过给按钮绑定点击事件来控制

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-1.11.3.js"></script>
    </head>
    <body>
        <form id="list" action="">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox"><br>
            <input id="all" type="checkbox">全选
            <button id="aga" type="button">反选</button>
            <button id="not_all" type="button">不选</button>
        </form>
        <script>
            $(function (){
                $('#list>#all').click(function (){
                    $('#list>.checkbox').prop('checked',$(this).prop('checked'));
                })
                $('#list>#aga').click(function (){
                    $('#list>.checkbox').prop('checked',function (i,e){
                        return !e;
                    })
                })
                $("#list>#not_all").click(function (){
                    $('#list>.checkbox').prop('checked',false);
                })
            })
        </script>
    </body>
</html>

唯有烟火知故人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现复选框的全选、反选和不选

使用jQuery实现复选框的全选、反选和不选通过给按钮绑定点击事件来控制<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-1.11.3.js"></script> </he
复制链接

扫一扫