Question

在HTML中，当我单击列表中的复选框时，它会将类添加到其父li，但是当我需要选择所有复选框时，如果已选择任何一个列表，那么它就会不匹配。

HTML：

<div class="row lml-dashboard">
                        <div class="col-xs-12 col-sm-3 col-md-3 left-section">
                            <div class="panel panel-default">
                                <!-- Default panel contents -->
                                <div class="panel-heading"><input type="checkbox" id="select_all"> 
                                    <select class="select-admin">
                                        <option>7 Operators</option>
                                        <option>7 Trainers</option>
                                    </select>
                                </div>

                                <!-- List group -->
                                <ul class="list-group member-list">
                                    <li class="list-group-item checked">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]" checked="checked"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Kimberly Palmer
                                        </label>
                                    </li>
                                    <li class="list-group-item">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Christopher Henry
                                        </label>
                                    </li>
                                    <li class="list-group-item">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Henry Edwards
                                        </label>
                                    </li>
                                    <li class="list-group-item">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Dylan Gordon
                                        </label>
                                    </li>
                                    <li class="list-group-item">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Aaron Ford
                                        </label>
                                    </li>
                                    <li class="list-group-item">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Benjamin Allen
                                        </label>
                                    </li>
                                    <li class="list-group-item">
                                        <label>
                                            <input class="checkbox-lms" type="checkbox" name="check[]"> 
                                            <span class="avatar"><img src="images/user.png"></span>
                                            Henry Sanchez
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>

JS：

$(".member-list li :checkbox").on('click', function(){
        $(this).parents(".list-group-item").toggleClass("checked");
    });
    $("#select_all").on('click', function(){
        $(".list-group-item").toggleClass("checked",this.checked);
    });

演示：

https://fiddle.jshell.net/regrduq5/

Answer 1

您可以在切换列表组中选中的班级时使用全选复选框选中状态：

$("#select_all").on('click', function(){
  $(".list-group-item").toggleClass("checked",this.checked);
});

<强> Working Demo

选中所有复选框问题

1 个答案: