取消选中并检查所有 JavaScript 中的多组检查按钮

Question

我有两组不同的复选框。

// "Broker" Checkboxes
    <label class="container" >Select All
                        <input type="checkbox" id="select-all" checked >
                        <span class="checkmark"></span>
                </label>
                <label class="container" >Avisons
                        <input type="checkbox" id="AvisonCheckbox" checked >
                        <span class="checkmark"></span>
                </label>
                <label class="container" >CBRE
                        <input type="checkbox" id="CBRECheckbox" checked >
                        <span class="checkmark"></span>
                </label>


//"Tenant" Checkboxes
<div class="tenantSelectAll" >Select All
                    <input type="checkbox" id="tenantSelect-all"  checked/>
                    <label  for="tenantSelect-all"></label>
                </div>
                        
                <div class="round" style="margin-right:30px">WeWork
                    <input type="checkbox" id="WeWorkCheckbox"  checked/>
                    <label  for="WeWorkCheckbox"></label>
                </div>
                
                <div class="Regus" style="margin-right:30px; margin-top:13px">Regus
                    <input type="checkbox" id="RegusCheckbox"  checked/>
                    <label  for="RegusCheckbox"></label>
                </div>

问题是我正在尝试为上面列出的每个复选框集实现全选/取消全选复选框。以下代码有效，但它选择/取消选择“经纪人”和“租户”复选框。我希望“经纪人”复选框中的“全选”复选框仅从“经纪人”复选框中选择/取消选择，并且“租户”复选框也是如此。

//Implement Select All and Unselect all checkboxes
$('#select-all').click(function(event) {   
if(this.checked) {
    // Iterate each checkbox
    $(':checkbox').each(function() {
        this.checked = true;                        
    });
} else {
    $(':checkbox').each(function() {
        this.checked = false;                       
    });
}
});

接下来我可以尝试什么？

Answer 1

您为什么不尝试在复选框中添加一个类，或者甚至将这些输入放入单独的容器中并直接引用。 这段代码对我有用。希望对您有所帮助。

//Implement Select All and Unselect all checkboxes
$('#select-all').click(function(event) {   
if(this.checked) {
    // Iterate each checkbox
    $(':checkbox.brokeropt').each(function() {
        this.checked = true;                        
    });
} else {
    $(':checkbox.brokeropt').each(function() {
        this.checked = false;                       
    });
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// "Broker" Checkboxes
    <label class="container" >Select All
                        <input type="checkbox" id="select-all" checked >
                        <span class="checkmark"></span>
                </label>
                <label class="container" >Avisons
                        <input type="checkbox" class="brokeropt" id="AvisonCheckbox" checked >
                        <span class="checkmark"></span>
                </label>
                <label class="container" >CBRE
                        <input type="checkbox" class="brokeropt" id="CBRECheckbox" checked >
                        <span class="checkmark"></span>
                </label>
                
                //"Tenant" Checkboxes
<div class="tenantSelectAll" >Select All
                    <input type="checkbox" id="tenantSelect-all"  checked/>
                    <label  for="tenantSelect-all"></label>
                </div>

                <div class="round" style="margin-right:30px">WeWork
                    <input type="checkbox" id="WeWorkCheckbox"  checked/>
                    <label  for="WeWorkCheckbox"></label>
                </div>

                <div class="Regus" style="margin-right:30px; margin-top:13px">Regus
                    <input type="checkbox" id="RegusCheckbox"  checked/>
                    <label  for="RegusCheckbox"></label>
                </div>

Answer 2

尝试粘贴以下代码：为 Broker 的子复选框添加 Broker 类，并为 Tenant 的子复选框添加租户，然后在 select all event 中，使用类选择器。 把这个对你有用。

    <script type="text/javascript">
     $(function () {         
        $('#select-all,#tenantSelect-all').click(function (event) {
            switch (this.id) {
                case "select-all":
                    // check or uncheck by class
                    $(':checkbox.Broker').prop("checked", this.checked);
                    // or you can  check or uncheck by org
                    $('label :checkbox').prop("checked", this.checked);
                    break;
                case "tenantSelect-all":
                    // check or uncheck by class
                    $(':checkbox.Tenant').prop("checked", this.checked);
                    // or you can  check or uncheck by org
                    $('div :checkbox').prop("checked", this.checked);
                    break;
            }
        });
     });
</script>
<label class="container" >Select All
    <input type="checkbox" id="select-all" checked >
    <span class="checkmark"></span>
</label>
<label class="container" >Avisons
    <input class="Broker"  type="checkbox" id="AvisonCheckbox" checked >
    <span class="checkmark"></span>
</label>
<label class="container" >CBRE
    <input class="Broker"  type="checkbox" id="CBRECheckbox" checked >
    <span class="checkmark"></span>
</label>
<div class="tenantSelectAll" >Select All
    <input type="checkbox" id="tenantSelect-all"  checked/>
    <label  for="tenantSelect-all"></label>
</div>

<div class="round" style="margin-right:30px">WeWork
    <input  class="Tenant"   type="checkbox" id="WeWorkCheckbox"  checked/>
    <label  for="WeWorkCheckbox"></label>
</div>

<div class="Regus" style="margin-right:30px; margin-top:13px">Regus
    <input class="Tenant"   type="checkbox" id="RegusCheckbox"  checked/>
    <label  for="RegusCheckbox"></label>
</div>

Answer 3

使用 D3 的解决方案

d3.select("#brokerSelect-all")
  .on('click', function () {
    let that = this;
    d3.selectAll(".brokercheck")
      .each(function () { this.checked = that.checked });
  });
d3.select("#tenantSelect-all")
  .on('click', function () {
    let that = this;
    d3.selectAll(".tenantcheck")
      .each(function () { this.checked = that.checked });
  });

<p>"Broker" Checkboxes</p>
<label class="container" >Select All
    <input type="checkbox" id="brokerSelect-all" checked >
    <span class="checkmark"></span>
</label>
<label class="container" >Avisons
    <input class="brokercheck" type="checkbox" id="AvisonCheckbox" checked >
    <span class="checkmark"></span>
</label>
<label class="container" >CBRE
    <input class="brokercheck" type="checkbox" id="CBRECheckbox" checked >
    <span class="checkmark"></span>
</label>


<p>"Tenant" Checkboxes</p>
<div class="tenantSelectAll" >Select All
    <input type="checkbox" id="tenantSelect-all"  checked/>
    <label  for="tenantSelect-all"></label>
</div>

<div class="round" style="margin-right:30px">WeWork
    <input class="tenantcheck" type="checkbox" id="WeWorkCheckbox"  checked/>
    <label  for="WeWorkCheckbox"></label>
</div>

<div class="Regus" style="margin-right:30px; margin-top:13px">Regus
    <input class="tenantcheck" type="checkbox" id="RegusCheckbox"  checked/>
    <label  for="RegusCheckbox"></label>
</div>

<script src="https://d3js.org/d3.v5.min.js"></script>