jquery实现checkbox的单选和全选思路详解

【思路分析】

1、全选与不选块模块

  • 给全选按钮添加change事件
  • 就是将全选按钮（checkall）的状态赋值给三个小的按钮（checkitem）即可

2、小复选框模块

  • 给小复选框添加change事件，
  • 每点击一次就去判断此时总共被选中的小复选框的个数，如果“小复选框被选中的个数=小复选框总个数”，此时就应该把全选按钮选上，否则不选。

【知识点】

1、change事件

2、jquery属性操作之设置或获取元素固有属性值prop()

3、if(){……}eles{……}

【代码】

css代码

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .checkbox {
        width: 200px;
        margin: 30px auto;
    }
    
    .thead-checkbox {
        border: 1px solid #000000;
        background-color: lightgray;
    }
    
    .item-checkbox {
        border: 1px solid darkgray;
    }
</style>

html代码

<body>
    <div class="checkbox">
        <!-- 全选与不全选模块 -->
        <div class="thead-checkbox">
            <input type="checkbox" name="" id="" class="checkall">全选
        </div>
        <!-- 小复选框选 -->
        <div class="item-list-checkbox">
            <div class="item-checkbox"><input type="checkbox" class="checkitem">单选1</div>
            <div class="item-checkbox"><input type="checkbox" class="checkitem">单选2</div>
            <div class="item-checkbox"><input type="checkbox" class="checkitem">单选3</div>
            <div class="item-checkbox"><input type="checkbox" class="checkitem">单选4</div>
        </div>
    </div>
</body>

 js代码：

 //引入jquery
 <script src="jquery.mini.js"></script>
<script>
    $(function() {
        // 1、全选与不全选模块
        $(".checkall").change(function() {
            // console.log($(this).prop("checked"));输出全选按钮的选中状态
            $(".item-list-checkbox .checkitem").prop("checked", $(this).prop("checked"));
        });
        // 2、小复选框模块
        $(".checkitem").change(function() {
            if ($(".checkitem:checked").length === $(".checkitem").length) {
                $(".checkall").prop("checked", true);
            } else {
                $(".checkall").prop("checked", false);

            }
        })
    })
</script>

【效果】

 

posted @ 2021-07-15 11:18  蛋蛋仔  阅读(834)  评论(0)    收藏  举报