JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="chkSelectDeselectAll">Select All
    <br><br>

    Select your hobbies:
    <br><br>

    <input type="checkbox" id="chkTV">Watching T.V.<br><br>

    <input type="checkbox" id="chkGardening">Gardening<br><br>

    <input type="checkbox" id="chkSwimming">Swimming<br><br>

    <input type="checkbox" id="chkChess">Playing Chess<br><br>

JavaScript

var collection = $("input:checkbox:not(#chkSelectDeselectAll)").change(function() {
    selectAll[0].checked = collection.filter(":not(:checked)").length === 0;
});
var selectAll = $("#chkSelectDeselectAll").change(function(){
    collection.attr('checked', this.checked);
});