JSFiddle - React, Tailwind, and code Playground

by Joe Cisneros

HTML

<div>
    <input type="radio" name="group1"/>
    <input type="radio" name="group1"/>
    <input type="radio" name="group1"/>
    <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>
<div>
    <button id="check">Check</button>
    <button id="uncheck">Un-Check</button>
    <button id="toggle">Toggle</button>
</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() {
    
    $('#check').click(function() {
        $(':radio').checked(true);
    });
    
    $('#uncheck').click(function() {
        $(':radio').checked(false);
    });
    
    $('#toggle').click(function() {
        $(':radio').checked('toggle');
    });
    
    $(':radio').change(function(a) {
    	console.log(a);
    });
    
    
});