Question

我试图创建两个不互相交互的复选框系统。我面临的问题是主人选择所有＆＃39;框选择整个文档中的所有复选框，最终从两个表单中选择所有复选框。

有没有办法保留所有功能，但保持表格完全分开？

---第一种形式JAVASCRIPT ---

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

---第二种形式JAVASCRIPT ---

<script>
$(function () {
  $('#checkAll2').on('click', function () {
    $(document).find(':checkbox').prop('checked', this.checked);
  });
});
</script>
<script>
$(function () {
  $(".checkall2").click(function () {
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
});
</script>

--- FIRST FORM HTML ---

<center><input type="checkbox" name="checkAll" id="checkAll"></center><br/>             
<div class="row">                   
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall"> 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"> 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> 
    </div>            
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall"> 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> 
    </div>      
</div>

--- SECOND FORM HTML ---

<center><input type="checkbox" name="checkAll" id="checkAll2"></center><br/>                
<div class="row">                   
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall2"> 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="checkall2"> 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> 
    </div>            
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall2"> 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> 
     </div>     
</div>

Answer 1

试试这个：

$(function() {
    $('#checkAll, #checkAll2').on('click', function() {
        $(this).parent().next().next().find(':checkbox').prop('checked', this.checked);
    });
});

jsFiddle

Answer 2

您可以向两个表单添加容器，然后修改您的js以单独检查组。

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

您可以在此fiddle

中查看工作代码

两个不相互交互的多层复选框系统

2 个答案: