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的子复选框添加Tenant，然后在使用类选择器的select all event中。 Holp这对您有帮助。

    <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>

取消选中并全部选中JavaScript中的多组检查按钮

3 个答案: