JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding:20px">
<p style="background:red"><input type="checkbox" name="select-all" /></p>
<input type="checkbox" name="affected" />
</div>

JavaScript

$(document).ready(function(){
    $('p').click(function(e){
            var $checkbox = $(this).find('input[type=checkbox]');
            
            if(e.target != $checkbox.get(0)) {
                $checkbox.trigger('click');
            }
            
    });
    
    $('input[type=checkbox][name=select-all]').click(function(e){
        var $self = $(this);
        console.log($self.is(':checked')); 
        if($self.is(':checked')) {
            $('input[type=checkbox]:not([name=select-all])').attr('checked', true);
            
        } else {
            $('input[type=checkbox]:not([name=select-all])').attr('checked', false);
        }
        
    });
});