JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkgroup">
    <input type="checkbox" name="data[Student][hobby][]" value="checkAll" id="StudentHobbyCheckAll" />
    <label for="StudentHobbyCheckAll">Check All/Uncheck All</label>
</div>
<div class="checkgroup">
    <input type="checkbox" name="data[Student][hobby][]" value="sports" id="StudentHobbySports" />
    <label for="StudentHobbySports">Sports</label>
</div>
<div class="checkgroup">
    <input type="checkbox" name="data[Student][hobby][]" value="movies" id="StudentHobbyMovies" />
    <label for="StudentHobbyMovies">Movies</label>
</div>
<div class="checkgroup">
    <input type="checkbox" name="data[Student][hobby][]" value="netsurfing" id="StudentHobbyNetsurfing" />
    <label for="StudentHobbyNetsurfing">Netsurfing</label>
</div>
<div class="checkgroup">
    <input type="checkbox" name="data[Student][hobby][]" value="photography" id="StudentHobbyPhotography" />
    <label for="StudentHobbyPhotography">Photography</label>
</div>

JavaScript

var $chAll = $('#StudentHobbyCheckAll');
var $ch=$('.checkgroup input[type="checkbox"]').not($chAll)

$chAll.click(function () {
    $ch.prop('checked', $(this).prop('checked'));
})

$ch.click(function(){
    if($ch.size()==$('.checkgroup input[type="checkbox"]:checked').not($chAll).size())
        $chAll.prop('checked',true)
    else
        $chAll.prop('checked',false)
})