JSFiddle - React, Tailwind, and code Playground

HTML

<table id="sample_1" aria-describedby="sample_1_info">
   <thead>
      <tr>
         <th><input type="checkbox" id="selecctall"></th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody class="odd gradeX">
      <tr>
         <td width="5%"><input type="checkbox" class="checkbox1" id="1"></td>
         <td width="37%">Chips And Chocolates,Bummy Chips,Plain Salted,ytrytr,hyryr</td>
      </tr>
      <tr>
         <td width="5%"><input type="checkbox" class="checkbox1" id="2"></td>
         <td width="37%">Chips And Chocolates</td>
      </tr>
   </tbody>
</table>
       
       
       <input type="button" class="btn blue" value="Delete" id="deletebtn">

JavaScript

$('#selecctall').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"               
            });
        }else{
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });         
        }
    });


$( "#deletebtn" ).click(function() {
  var $checked = $('#sample_1').find(":checkbox:checked");

      if (!$checked.length) {
        alert('Need to select atlease one radio button');
        event.stopImmediatePropagation();
    }
    
     else {
         
       
         
     }
  
});