JSFiddle - React, Tailwind, and code Playground

by hrsetyono

HTML

<a id="check_all">Check All</a>
<div>
    <input type="checkbox" name="cb" value="abc">ABC
</div>
<div>
    <input type="checkbox" name="cb" value="pqr">PQR <br>
</div>
<div>
    <input type="checkbox" name="cb" value="xyz">XYZ <br>
</div>

CSS

.highlight {
    background-color: red;
}

#check_all {
    display: inline-block;
    background-color: yellow;
    padding: 15px;
    cursor: pointer
}

JavaScript

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });
    
    $("#check_all").on('click', function(){
        $("input[type='checkbox']").prop('checked', true);
    });
});