javascript jquery checkbox toggle uiswitch

Toggle all switches with one switch

I have the following table.

I want to toggle all the switches with class name the-checkbox-input when toggled the first switch with class name checkbox-input-main. I tried the following code but it is not working. The code seems fine to me.

How can I resolve this? I tried a lot but couldn't find any error. The code still doesn't work.

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

Solution

You missed the ,true in $(".the-checkbox-input").attr("checked",true) but this is simpler

I use PROP because that is recommended and using attr seems to not re-check when unchecking one

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

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