JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="container">
    <div><input type="checkbox" class="selectAll" data-target="chkGroup" /><label> Select All </label></div>
    <div><input type="checkbox" name="chkGroup" /><label> Checkbox 1 </label></div>
    <div><input type="checkbox" name="chkGroup" checked /><label> Checkbox 2 </label></div>
    <div><input type="checkbox" name="chkGroup" /><label> Checkbox 3 </label></div>
    <div><input type="checkbox" name="chkGroup" /><label> Checkbox 4 </label></div>
    <div><input type="checkbox" name="chkGroup" /><label> Checkbox 5 </label></div>
    <div><input type="checkbox" name="chkGroup" /><label> Checkbox 6 </label></div>
</div>

<div class="container">
    <div><input type="checkbox" class="selectAll" data-target="chkGroup2" /><label> Select All </label></div>
    <div><input type="checkbox" name="chkGroup2" /><label> Checkbox 1 </label></div>
    <div><input type="checkbox" name="chkGroup2" /><label> Checkbox 2 </label></div>
    <div><input type="checkbox" name="chkGroup2" /><label> Checkbox 3 </label></div>
    <div><input type="checkbox" name="chkGroup2" /><label> Checkbox 4 </label></div>
    <div><input type="checkbox" name="chkGroup2" /><label> Checkbox 5 </label></div>
    <div><input type="checkbox" name="chkGroup2" /><label> Checkbox 6 </label></div>
</div>

CSS

input[type=checkbox] {
    float:left;
}
.container {
    margin:10px 0;
}

JavaScript

(function ( $ ) {
    
    $.fn.selectAll = function() { 
        return this.each(function() {
            
            var self = $(this);           
            var dataTarget = self.data('target');
            var target = $('input[name="'+dataTarget+'"]');
            var numBoxes = target.length;     
            
            self.on('click', function(e) {                
                var chkStatus = this.checked;               
                target.prop('checked', chkStatus); 
                e.stopPropagation();
            });
            
            target.on('click', function(e) {                         
                var isChecked = $('input[name="'+dataTarget+'"]:checked');
                var numChecked = isChecked.length;
                var chkStatus = (numChecked === numBoxes) ? true : false;
                
                self.prop('checked', chkStatus);
                e.stopPropagation();
            });          
        }); 
    };
    
}( jQuery ));

$(function() {
    $('.selectAll').selectAll();
});