时间戳

首页 > 解决方案 > 取消选中并检查所有 JavaScript 中的多组检查按钮

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

问题描述

我有两组不同的复选框。

// "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;                       
    });
}
});

接下来我可以尝试什么？

标签： javascriptjqueryhtmld3.jscheckbox

解决方案

尝试粘贴以下代码：为 Broker 的子复选框添加 Broker 类，并为 Tenant 的子复选框添加租户，然后使用类选择器在全选事件中。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>

推荐阅读