JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table width="30%" cellspacing="1" cellpadding="1" border="collapse">
            <tr>
                <td><b><input type="checkbox" class="group" chk="g1"/> Pilih Semua</b></td>
                <td><b><input type="checkbox" class="group" chk="g2"/> Pilih Semua</b></td>
                <td><b><input type="checkbox" class="group" chk="g3"/> Pilih Semua</b></td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="g1"/>
                <input type="checkbox" class="g1"/>
                <input type="checkbox" class="g1"/>
              </td>
              <td>
                <input type="checkbox" class="g2"/>
                <input type="checkbox" class="g2"/>
                <input type="checkbox" class="g2"/>
              </td>  
              <td>
                <input type="checkbox" class="g3"/>
                <input type="checkbox" class="g3"/>
                <input type="checkbox" class="g3"/>
              </td>  
            </tr>
            
        </table>

JavaScript

$(function(){
	$(".group").click(function(){
  	var click = $(this).attr('chk');
    var current = $("."+click).attr('checked');
    if(current){
    		$("."+click).removeAttr('checked');
    }else{
    	$("."+click).attr('checked','checked');
    }
  })
})