JSFiddle - React, Tailwind, and code Playground

HTML

<section id="main">
     <form id="task-list"> <input id="toggle-all" name="toggle-all" type="checkbox" /> 
      </form>
 </section>

 <table class="table" >
     <tr>
         <td><input type="checkbox" class="checkall"  />item.todo </td>
         <td> item.name</td><td>
     </tr>
     <tr>
         <td><input type="checkbox" class="checkall"  />item.todo </td>
         <td> item.name</td><td>
     </tr>
         
         <tr>
         <td><input type="checkbox" class="checkall"  />item.todo </td>
         <td> item.name</td><td>
     </tr>
 </table>

JavaScript

$(document).ready(function() {

    $("#toggle-all").click(function() {
        $(".table input:checkbox").prop("checked", $(this).prop("checked"));
    });

});