JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="btn-select-all-1">Select/un-select All
<ul>
    <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
</ul>

JavaScript

$(document).ready(function(){
    
    var btnSelectAll = $("#btn-select-all-1");
    var toSelect = $('.select1')
    
    btnSelectAll.live('click', function(){
        if(btnSelectAll.is(":checked")){
          toSelect.attr("checked", "checked");
        }else{
          toSelect.removeAttr("checked");
        }
      });

});