一鍵切換所有開關

我有下表。

the-checkbox-input當用 class name切換第一個開關時，我想用 class name 切換所有開關checkbox-input-main。我嘗試了以下代碼，但它不起作用。代碼對我來說似乎很好。

我該如何解決這個問題？我嘗試了很多，但找不到任何錯誤。該代碼仍然不起作用。

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

uj5u.com熱心網友回復：

你錯過了,true，$(".the-checkbox-input").attr("checked",true)但這更簡單

我使用 PROP 因為這是推薦的并且使用 attr 似乎在取消選中一個時不會重新檢查

$(function() {
  $(".checkbox-input-main").on("click", function() {
    $(".the-checkbox-input").prop("checked", this.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>

uj5u.com熱心網友回復：

我已經在js 中完成了，以防有人想在沒有 jquery 的情況下做同樣的事情。

如果您可以只使用 js 并多寫一點，那就沒問題了！

$(document).ready(function() {
  const checkboxInputMain = document.querySelector(".checkbox-input-main");
  checkboxInputMain.addEventListener("change", () => {
    let checkboxes = document.getElementsByClassName("the-checkbox-input");
    for(let i = 0; i < checkboxes.length; i  ) {
      checkboxes[i].checked = checkboxInputMain.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>

標籤：javascript 查询 复选框 切换 用户界面

上一篇：在包含有相同列名但表名和資料不同的表的聯合查詢中，處理添加新表的更好方法。

下一篇：在多個json結構中按鍵搜索多個元素