Question

我正在尝试创建一个多层选择所有功能。目的是能够选择部门内的所有员工或完全选择所有员工。我还需要能够取消选择。

我到目前为止的代码如下:(部门选择工作完美，但是我无法使主检查框工作）

<-- JAVASCRIPT --

$(function () {
$('.checkall').on('click', function () {
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});

-- separate script --

$(function () {
$("#checkAll").click(function () {
    if ($("#checkAll").is(':checked')) {
        $(".mast").prop("checked", true);
    } else {
        $(".mast").prop("checked", false);
    }
});
});

--HTML--

<input type="checkbox" name="checkAll" id="checkAll"><br/>

                                                       <fieldset><div><input type="checkbox" class="checkall" name="mast"> IT Dept</div><br>
                                                             <div><input type="checkbox"> number 1</div>
                                                        <div><input type="checkbox"> number 2</div>
                                                        <div><input type="checkbox"> number 3</div>
                                                        <div><input type="checkbox"> number 4</div>
                                            </fieldset>             
                                        </div>
                                        <div class="col-md-4 col-sm-4">
                                            <fieldset><div><input type="checkbox" class="checkall" name="mast"> Marketing</div><br>
                                                        <div><input type="checkbox"> number 1</div>
                                                        <div><input type="checkbox"> number 2</div>
                                                        <div><input type="checkbox"> number 3</div>
                                                        <div><input type="checkbox"> number 4</div>
                                                        <div><input type="checkbox"> number 5</div>
                                                        <div><input type="checkbox"> number 6</div>
                                            </fieldset>             
                                        class="col-md-4 col-sm-4">
                                            <fieldset><div><input type="checkbox" class="checkall" name="mast"> Finance</div><br>
                                                        <div><input type="checkbox"> number 1</div>
                                                        <div><input type="checkbox"> number 2</div>
                                                        <div><input type="checkbox"> number 3</div>
                                                        <div><input type="checkbox"> number 4</div>
                                            </fieldset>

Answer 1

我对你进行了一些小修改，请检查

$(function () {
  $('#checkAll').on('click', function () {
    $(document).find(':checkbox').prop('checked', this.checked);
  });
});
$(function () {
  $(".checkall").click(function () {
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
});

请查看fiddle了解工作示例

多层选择所有复选框系统

1 个答案: