JSFiddle - React, Tailwind, and code Playground

HTML

<div class="friends_container">
    <div class="friend">
        <input type="checkbox" />    
        Jim
    </div>
    <div class="friend">
        <input type="checkbox" />    
        Bob
    </div>
     <div class="friend">
        <input type="checkbox" />    
        Mary
    </div>
</div>

<a id="selectall" href="#" >select all</a>

SCSS

#selectall {
    color: red;
    &.selected {
        color: green;
    }
}

JavaScript

$(function() {
    var $checkboxes = $('.friends_container>.friend>input:checkbox');
    $('#selectall').on('click', function(e) {
        //e.preventDefault();
        //$(this).toggleClass('selected');
        $checkboxes.prop('checked', true)
    });
});