Снимите флажок и отметьте все для нескольких наборов флажков в 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

попробуйте вставить следующий код: добавьте класс Broker для вспомогательного флажка Broker и добавьте Tenant для вспомогательного флажка Tenant, затем выберите все события, используя селектор классов.Остановись, это полезно для тебя.

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

Решение с 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>

Answer 3

Почему бы вам не попробовать добавить класс к флажку или даже поместить эти входные данные в отдельные контейнеры и ссылаться напрямую.Этот код работает для меня.Надеюсь, это помогло.

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