JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<input type="checkbox" id="SelctCheckAll" name="SelctCheckAll"> ALL
<fieldset>
  <input type="checkbox" class="checkbox1">1-1
  <input type="checkbox" class="checkbox1">1-2
  <input type="checkbox" class="checkbox1">1-3
  <input type="checkbox" class="checkbox1">1-4
  <input type="checkbox" class="checkbox1">1-5
  <input type="checkbox" class="checkbox1">1-6
  <input type="checkbox" class="checkbox1">1-7
</fieldset>

<fieldset>
  <input type="checkbox" class="checkbox2">2-1
  <input type="checkbox" class="checkbox2">2-2
  <input type="checkbox" class="checkbox2">2-3
  <input type="checkbox" class="checkbox2">2-4
  <input type="checkbox" class="checkbox2">2-5
  <input type="checkbox" class="checkbox2">2-6
  <input type="checkbox" class="checkbox2">2-7

</fieldset>

JavaScript

$(document).ready(function() {
  $("#SelctCheckAll").click(function() {
    alert("Total Selected from Class1: " + $("input:checked[class='checkbox1']").not(this).length);
    alert("Total Selected from Class2: " + $("input:checked[class='checkbox2']").not(this).length);
  });
});