JSFiddle - React, Tailwind, and code Playground

HTML

<form name="smform" id="smform" method="post" action="">
      <input type="checkbox" name="Check_All" onClick="Check(document.smform['check[]'])"  > Check All <br>

     <input type="checkbox" name="check[]" value="blue_color"> Blue<br>
     <input type="checkbox" name="check[]" value="green_color"> Green<br>
     <input type="checkbox" name="check[]" value="orange_color"> Orange<br>
</form>

JavaScript

function Check(chk)
    {
        if(document.smform.Check_All.checked){
        for (i = 0; i < chk.length; i++)
        chk[i].checked = true ;
        document.smform.Check_All.checked = true;
    }else{

        for (i = 0; i < chk.length; i++)
        chk[i].checked = false ;
        document.smform.Check_All.checked = false;
    }
}