Jquery: Select all check boxes when 'select all' is checked

Question

I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.

Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).

Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):

checked = true;

$(".all").click(function() {

  checked = !checked;

  var selectid = this.id.replace(/ /g, '');
  console.log("====>>>" + selectid);
  var item = `${selectid}-item`;
  console.log("===<<<" + item)

  var checkElements = $(`.${selectid}-item`).prop('checked', checked);


  $(selectid + "-item").prop('checked', !checked);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Cats</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Cat 1</td>
      <td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 2</td>
      <td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 3</td>
      <td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Dogs</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Dog 1</td>
      <td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 2</td>
      <td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 3</td>
      <td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>

  <input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

This is obviously not a Django issue. Please click edit, then [<>] and produce a minimal reproducible example with plain HTML, JavaScript and CSS plus whatever frameworks you use. I for one do not have a django server to save your page to, to test a script — mplungjan

mplungjan mplungjan · Accepted Answer · 2020-09-06T12:54:18

I had to normalise your classes. They were not consistent. Don't have spaces in IDs (I got rid of the ID from all) and do not have spaces between classNames that mean something when taken together

const checkAll = () => {
  $(".all").each(function() {
    const subClass = $(this).data("class");
    const $sub = $("." + subClass+"-item");
    $(this).prop("checked", $sub.length === $sub.filter(":checked").length)
  })
};
$(function() {
  checkAll(); //on load
  $(".all").on("click", function() {
    const $sub = $("." + $(this).data("class")+"-item"); 
    const checked = this.checked;
    $sub.prop('checked', checked);
  })
  $(".item").on("click", checkAll)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Cats</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Cat 1</td>
      <td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 2</td>
      <td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 3</td>
      <td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Dogs</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Dog 1</td>
      <td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 2</td>
      <td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 3</td>
      <td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>

  <input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

Jquery: Select all check boxes when 'select all' is checked

1 Answers