JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<div id="toggle">Toggle</div>
<div>
    <p>
    <input type="checkbox"/>
    <label for="checkbox-A-1">Label</label></p>
    <p>
    <input type="checkbox"/><label for="checkbox-A-1">Label</label></p>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>

CSS

div
{
    padding:10px;
    margin:5px;
    border: 1px solid black;
}

JavaScript

(function( $ ) {
    
    $.fn.checked = function(value) {
        
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
            
        } else if(value === undefined || value === 'toggle') {
            
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }
        
    };
    
})( jQuery );

$(function() {
    
    $('#toggle').click(function() {
        $(':checkbox').checked('toggle');
    });
    
    
});