JSFiddle - React, Tailwind, and code Playground

HTML

<a id="selectAll">Select all</a>
<div>
   <div class="Col-Liste">
       <input type="checkbox" checked="checked"/>
       <label>Checkbox1</label>
   </div>
   <div class="Col-Liste">
       <input type="checkbox"/>
       <label>Checkbox2</label>
   </div>
   <div class="Col-Liste">
       <input type="checkbox"/>
       <label>Checkbox3</label>
   </div>
</div>

JavaScript

$("#selectAll").click(function () {
   var that = $(this);
   var inputs = that.parent().find("input[type=checkbox]");
   var checkedInputs = that.parent().find("input[type=checkbox]:checked");
    console.log("inputs.length : "+inputs.length);
    console.log("checkedInputs.length : "+checkedInputs.length);
   if (inputs.length == checkedInputs.length) {
      inputs.attr('checked', false);
      that.text("select all");
   }
   else{
      inputs.attr('checked', true);
      that.text("unselect all");
   }
});