JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<input name="togglechk" id="togglechk" type="checkbox" />

<div class="trcls">

<input name="chk[]" type="checkbox"  class="abc"/> 

<input name="chk[]" type="checkbox"  class="abc"/>

<input name="chk[]" type="checkbox"  class="abc"/>

</div>

JavaScript

$("#togglechk").click(function() {
     if($("#togglechk").is(":checked")) { 
             $(".trcls").find("input:checkbox").prop("checked", true);
    } else {
            $(".trcls").find("input:checkbox").prop("checked", false);
   }
});

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       $("#togglechk").prop("checked", true);
    }
});