jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法


html代码如下所示:
                     <div>
                        <label>
                            <input type="checkbox" id="checkbox_a1">父input
                        </label>
                    </div>
                    <div id="chkList_1">
                        <label>
                            <input type="checkbox">子input1
                        </label>
                        <label>
                            <input type="checkbox">子input2
                        </label>
                        <label>
                            <input type="checkbox">子input3
                        </label>
                    </div>
jq代码如下所示:
1:实现子复选框的状态改变父复选框状态的方法:原理是在点击子复选框时通过判断子复选框选中状态的个数来控制复选框的状态
                       $('#chkList_1 input').change(function(){
                            var num = $('#chkList_1 input').map(function(){
                            var a = $(this).prop('checked')
                                if (a) {return a}
                            })
                              // alert(num.length)
                            if (num.length==0) {
                                    $('#checkbox_a1').prop('checked',false)
                                }else{
                                    $('#checkbox_a1').prop('checked',true)
                            }
                       })
2:实现通过父复选框实现全选和反全选:原理是通过父复选框的change事件来判断父复选框的选中状态从而改变子复选框的状态
                       $('#checkbox_a1').change(function(){
                          if ($(this).prop('checked')) {
                            $('#chkList_1 input').prop('checked',true)
                          }else{
                            $('#chkList_1 input').prop('checked',false)
                          }
                       })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值