JSFiddle - React, Tailwind, and code Playground

by f0t0n

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', function() {
            return !this.checked;
        });
    });
});