JQuery - 复选框 - 全选和全不选

最新推荐文章于 2021-05-22 15:53:34 发布

Saggitarxm

最新推荐文章于 2021-05-22 15:53:34 发布

阅读量117

点赞数

分类专栏： HTML 文章标签： jquery 复选框 checkbox

本文链接：https://blog.csdn.net/xuezhangjun0121/article/details/100884370

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head >
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jquery操作checkbox方法 - 全选和取消全选</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" >
        function hehe() {
            var isChecked = $('#haha').prop("checked");
            console.log('isChecked = ', isChecked)

            $("#haha").each(function() {
                console.log('this.checked = ', this.checked)

                if (this.checked) {
                    console.log('------ add ')
                    selectAll()
                    console.log('------ add end')

                } else {
                    console.log('------ remove')
                    selectNone()
                    console.log('------ remove end')


                }
            })
        }


        // function hehe() {
        //     var isChecked = $('#haha').prop("checked");
        //     console.log('isChecked = ', isChecked)
        //
        //     $("#haha").each(function() {
        //         console.log('this.checked = ', this.checked)
        //
        //         if (this.checked) {
        //             console.log('------ add ')
        //             selectAll()
        //             console.log('------ add end')
        //
        //         } else {
        //             console.log('------ remove')
        //             selectNone()
        //             console.log('------ remove end')
        //
        //
        //         }
        //     })
        // }
        //全选
        function selectAll() {
            //方法一：
            // $("input[name='bjjb']").attr("checked",true);
            //方法二：
            // $("input[name='bjjb']").each(function(){
            //     $(this).attr("checked",true);
            // });
            $("input[name='bjjb']").each(function(){
                $(this).prop("checked",true);
            });
            console.log('------ 全不选')
            $("#s-a").html("全不选");
        }
        //取消全选
        function selectNone(){
            //方法一：
            // $("input[name='bjjb']").removeAttr("checked");
            //方法二：
            // $("input[name='bjjb']").each(function(){
            //     $(this).attr("checked",false);
            // });
            $("input[name='bjjb']").each(function(){
                $(this).prop("checked",false);
            });
            console.log('------ 全选')
            $("#s-a").html("全选");
        }
        //反选
        // function selectInvert() {
        //     $("input[name='bjjb']").each(function(index,item){
        //         if ($(this).attr("checked")) {
        //             $(this).removeAttr("checked");
        //         } else {
        //             $(this).attr("checked", true);
        //         }
        //     });
        // }
        // function selectOne() {
        //     var checked=$("input[name='bjjb']:checked");
        //     if(checked.length==0){
        //         alert("请至少选择一个");
        //         return ;
        //     }
        //     $("#checked").html("");
        //     $("#checkedText").html("");
        //     $("input[name='bjjb']:checked").each(function () {
        //         $("#checked").append($(this).val()+",");
        //         //注意文本一定要元素标签如span否则next得不到值
        //         $("#checkedText").append($(this).next().text()+",");
        //     });
        //
        // }


    </script>
</head>
<body>
<form  id="" action="" method="post">
    <div >
        <input type="checkbox" name="bjjb" value="1"/><span>交通事故</span></br>
        <input type="checkbox" name="bjjb" value="2"/><span>自然灾害</span></br>
        <input type="checkbox" name="bjjb" value="3"/><span>恶劣天气</span></br>
        <input type="checkbox" name="bjjb" value="4"/><span>严重违法行为</span></br>
        <input type="checkbox" name="bjjb" value="5"/><span>路面损毁</span></br>
    </div>
    <div style="margin-top:10px;">
        <input type="checkbox" id="haha" name="selectAll" onclick="hehe()"   value="全选" /> <div id="s-a">全选</div>
        <!--        <input type="button"   onclick="selectNone()"   value="全不选" />-->

    </div>

</form>
</body>
</html>

Saggitarxm

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery操作checkbox方法 - 全选和取消全选</title> <scri...
复制链接

扫一扫

专栏目录