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

本是古典何须时尚 2022-06-05 01:26 305阅读 0赞

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)  
                          \}  
                       \})