JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion-heading" > <input type="checkbox" id="selectall" name="sample" class="selectall" />
<div style="float:left; ">  <a  class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse_1" />
Admin  Module  
</div>
</a>
</div>   
<div id="collapse_1" class="accordion-body collapse in">
<div class="accordion-inner" id="checkboxlist">
<table class="table table-bordered table-hover"   id="test" align="center" style="width:100%">
<tr>

<th width="450"><strong>Form Name</strong></th>
<th width="150"><strong>select</strong></th>
<th width="150"><strong>Edit</strong> </th>
<th width="150"><strong>Delete</strong></th>
<th width="150"><strong>View</strong></th>
</tr>
<tr>
<td style="padding-left:20%">Authentication</td>
<td  style="padding-left:8%"><input type="checkbox" id="case1" name="emailid[]" value="" class="case"/> </td>
<td  style="padding-left:8%"><input type="checkbox" id="case1" name="emailid[]" value="" class="case"/></td>
<td  style="padding-left:8%"><input type="checkbox" id="case1" name="emailid[]" value="" class="case"/> </td>
<td  style="padding-left:8%"><input type="checkbox" id="case1" name="emailid[]" value="" class="case"/></td>
</tr>

JavaScript

jQuery(function($) {
    $("#selectall").on('change', function () {
         $('.case').prop('checked', this.checked);
    });
});