JSFiddle - React, Tailwind, and code Playground

HTML

<input class="checkbox" onClick=Show("this") type="checkbox" name="checkboxAll" value="all">
<input class="checkbox" type="checkbox" name="checkboxname1" value="1">
<input class="checkbox" type="checkbox" name="checkboxname2" value="2">
<input class="checkbox" type="checkbox" name="checkboxname3" value="3">

JavaScript

$(function(){
    $('input[name="checkboxAll"]').change(function(){
        $('input[name^="checkboxname"]').prop("checked",$(this).is(':checked'))
    });
    
    
 $('input[name^="checkboxname"]').change(function(){
var a=$('input[name^="checkboxname"]').length;
     if( $('input[name^="checkboxname"]').filter(":checked").length==a){
         $('input[name="checkboxAll"]').prop("checked",true)}
     else
     {
         $('input[name="checkboxAll"]').prop("checked",false)
     }
    });  
    
});