使用jquery选择/取消选中按钮单击页面上的所有复选框

Question

这可能是重复的帖子，请原谅我。 我正在使用以下代码来实现上述目标;

  jQuery(document).ready(function () {
        $('#uncheckAll').click(function () {
        $(':checkbox').prop('checked', false);
        });
        $("#checkAll").click(function () {
            $(':checkbox').prop('checked', true);
        });
    });

 <div class="portlet-body form">
                        @{
                            var htmlListInfo = new HtmlListInfo(HtmlTag.table, 4, new { @class = "table table-condensed table-light" });
                        }
                        @using (Html.BeginForm("Index", "Jobs", FormMethod.Post))
                        {
                            <div class="form-body" id="teamRoles">
                                @Html.CheckBoxListFor(model => model.EmployeeTeamRoles,
                                    model => model.AvailableTeamRoles,
                                    entity => entity.Id,
                                    entity => entity.TeamRoleName,
                                    model => model.SelectedTeamRoles,
                                    htmlListInfo)
                            </div>
                            <div class="form-actions row-fluid">
                                <div class="col-md-6">
                                    <button class="btn btn-xs btn-circle green-meadow" id="checkAll" type="button"> Check All</button>
                                    <button class="btn btn-xs btn-circle red-sunglo" id="uncheckAll" type="button"> Uncheck All</button>
                                </div>
                                <div class="col-md-6">
                                    <div class="pull-right">
                                        <button class="btn btn-small red-sunglo" type="submit"><i class="fa fa-download"></i> Load Jobs</button>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>

看起来很好，但我不知道我在这里错过了什么，有人能指出我的错误，谢谢。

Answer 1

最后，我找到了解决方案;我必须明确地将css类添加到包含复选框的范围，如下所示;

 $('#uncheckAll').click(function () {
                $('input:checkbox').prop('checked', false);
                $('span').removeClass('checked');
            });
            $("#checkAll").click(function () {
                $('input:checkbox').prop('checked', true);
                $('span').addClass('checked');
            });