Select laravel 8 中的所有复选框按组

Question

我想 select 除了按组划分，我所能做的就是 select 所有复选框，而不是按组

这是我的 blade:

<div class="col-md-6 ">
                        <div class="row mb-3 ">
                            <div class="col-md-6">
                                <b>Group 1</b>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <div class="custom-control custom-checkbox  custom-control-right">
                                    <input id="selectall_group1" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
                                    <label for="selectall_group1" class="custom-control-label">
                                    Select All
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p>content 1</p>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <div class="custom-control custom-checkbox  custom-control-right">
                                    <input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input"/>
                                    <label for="content10" class="custom-control-label mr-auto"></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <p>content 1</p>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <div class="custom-control custom-checkbox  custom-control-right">
                                    <input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input"/>
                                    <label for="content11" class="custom-control-label mr-auto"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 ">
                        <div class="row mb-3 ">
                            <div class="col-md-6">
                                <b>Group 2</b>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <div class="custom-control custom-checkbox  custom-control-right">
                                    <input id="selectall_group2" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
                                    <label for="selectall_group2" class="custom-control-label">
                                    Select All
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p>content 2</p>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <div class="custom-control custom-checkbox  custom-control-right">
                                    <input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
                                    <label for="content12" class="custom-control-label mr-auto"></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <p>content 2</p>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <div class="custom-control custom-checkbox  custom-control-right">
                                    <input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
                                    <label for="content13" class="custom-control-label mr-auto"></label>
                                </div>
                            </div>
                        </div>
                    </div>

我已经添加了 select 所有但它是 select 所有复选框，我不知道我是否应该修复循环以便我可以从权限中获取 id。我只是坚持这个。

这是我用于 select

的 javascript

<script>
    function checkAll(ele) {
        var checkboxes = document.getElementsByTagName('input');
        if (ele.checked) {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox' && !(checkboxes[i].disabled)) {
                    checkboxes[i].checked = true;
                }
            }
        } else {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = false;
                }
            }
        }
    }
</script>

fiddle 这里： https://jsfiddle.net/rs2g9ct3/

Answer 1

如果您将 class 添加到包装器 div，这适用于您的 HTML - 我选择了 groupContainer

我从文档委托 - 如果您有更近的静态容器，请改用它

document.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.type && tgt.type==="checkbox" && tgt.id.startsWith("selectall")) {
    const checked = tgt.checked; 
    const parent = tgt.closest(".groupContainer");
    const checks = parent.querySelectorAll("input[type=checkbox][id^=content]");
    [...checks].forEach(chk => {
      if (!chk.disabled) chk.checked = checked;
    })
  }
  
})

<div class="col-md-6 groupContainer">
  <div class="row mb-3 ">
    <div class="col-md-6">
      <b>Group 1</b>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="selectall_group1" type="checkbox" class="custom-control-input" />
        <label for="selectall_group1" class="custom-control-label">Select All</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <p>content 1</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content10" class="custom-control-label mr-auto"></label>
      </div>
    </div>
    <div class="col-md-6">
      <p>content 1</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content11" class="custom-control-label mr-auto"></label>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6  groupContainer">
  <div class="row mb-3 ">
    <div class="col-md-6">
      <b>Group 2</b>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="selectall_group2" type="checkbox" class="custom-control-input" />
        <label for="selectall_group2" class="custom-control-label">
                                    Select All
                                    </label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <p>content 2</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content12" class="custom-control-label mr-auto"></label>
      </div>
    </div>
    <div class="col-md-6">
      <p>content 2</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content13" class="custom-control-label mr-auto"></label>
      </div>
    </div>
  </div>
</div>

Select laravel 8 中的所有复选框按组

Select all checkboxes by group in laravel 8

javascript

checkbox

selectall

laravel-blade