用一个开关切换所有开关

Posted 2023-05-08

【中文标题】用一个开关切换所有开关

【英文标题】：Toggle all switches with one switch

【发布时间】：2021-12-01 17:24:35

【问题描述】：

我有下表。

当切换第一个类名checkbox-input-main 的开关时，我想切换类名the-checkbox-input 的所有开关。我尝试了以下代码，但它不起作用。代码对我来说似乎很好。

我该如何解决这个问题？我尝试了很多，但找不到任何错误。代码还是不行。

$(document).ready(function() 
  $(".checkbox-input-main").on("click", function() 
    if ($(this).is(":checked")) 
      $(".the-checkbox-input").attr("checked");
     else 
      $(".the-checkbox-input").removeAttr("checked");
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered text-center dso-table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">
        <label class="switch mb-0">
          <input type="checkbox" class="checkbox-input-main">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        <label class="switch">
          <input type="checkbox" class="the-checkbox-input">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
    <tr>
      <th scope="row">
        <label class="switch">
          <input type="checkbox" class="the-checkbox-input">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
    </tbody>
</table>

【问题讨论】：

我给你加了一个sn-p并加了 您只需将值true 添加到checked 属性：$(".the-checkbox-input").attr("checked", true);

【参考方案1】：

您错过了$(".the-checkbox-input").attr("checked",true) 中的,true，但这更简单

我使用 PROP 是因为建议这样做，并且在取消选中一个时使用 attr 似乎不会重新检查

$(function() 
  const $mainCheck = $(".checkbox-input-main");
  const $chks = $(".the-checkbox-input");
  $mainCheck.on("click", function() 
    $chks.prop("checked", this.checked);
  );
  $chks.on("click", function() 
    const checked = $chks.filter(function()  return this.checked ).length
    $mainCheck.prop("checked", checked === $chks.length)
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered text-center dso-table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">
        <label class="switch mb-0">
          <input type="checkbox" class="checkbox-input-main">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        <label class="switch">
          <input type="checkbox" class="the-checkbox-input">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
    <tr>
      <th scope="row">
        <label class="switch">
          <input type="checkbox" class="the-checkbox-input">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
  </tbody>
</table>

纯 JS

window.addEventListener("load", function() 
  const mainCheck = document.querySelector(".checkbox-input-main");
  const chks = [...document.querySelectorAll(".the-checkbox-input")]; /// cast to array
  mainCheck.addEventListener("click", function() 
    chks.forEach(chk => chk.checked = this.checked);
  );
  chks.forEach(chk => chk.addEventListener("click", function() 
      const checked = chks.filter(chk => chk.checked).length; 
      mainCheck.checked = checked === chks.length;
    )
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered text-center dso-table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">
        <label class="switch mb-0">
          <input type="checkbox" class="checkbox-input-main">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        <label class="switch">
          <input type="checkbox" class="the-checkbox-input">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
    <tr>
      <th scope="row">
        <label class="switch">
          <input type="checkbox" class="the-checkbox-input">
          <span class="slider round"></span>
        </label>
      </th>
    </tr>
  </tbody>
</table>

【讨论】：

是的，这确实会切换所有复选框，但之后如果我手动检查其中一个依赖项并切换所有复选框，则该特定复选框不起作用。

假设，在您切换所有选中然后取消选中中间一个并再次切换所有之后，中间一个将没有效果。同样，如果我先检查中间一个和/或最后一个，而不是全部切换，然后我再切换所有，然后这些不会切换。此解决方案确实有效，但并不完美。

使用 PROP 修复

哦，是的，我怎么会忘记道具。也许是因为我已经有一段时间没有使用它了。它从我的脑海中滑落。谢谢:)

是的！完美:)