JSFiddle - React, Tailwind, and code Playground

by Pankaj Singh Sugara

HTML

<table id="sports">
    <tr>
        <td>Sports Type</td>
        <td>
        <input id="all_sports" class="input_checkbox" type="checkbox" name="all_sports" value="All Sports"/>All Facility<br/>
            <input class="input_checkbox" type="checkbox" name="sports" value="Circket"/>Circket<br/>
            <input class="input_checkbox" type="checkbox" name="sports" value="Basketball"/>Basketball<br/>
            <input class="input_checkbox" type="checkbox" name="sports" value="Volleyball"/>Volleyball<br/>
            <input class="input_checkbox" type="checkbox" name="sports" value="Football"/>Football<br/>
            <input class="input_checkbox" type="checkbox" name="sports" value="Baseball"/>Baseball<br/>
           
        </td>
    </tr>
</table>

JavaScript

$("#sports #all_sports").click(function(){
        if($("#sports #all_sports").is(':checked')){
           $("#sports input:checkbox[name=sports]").each(function(){
               $(this).attr("checked",true); 
            });
        }
        else{
             $("#sports input:checkbox[name=sports]").each(function(){
               $(this).attr("checked",false); 
            });
        }
    });