JSFiddle - React, Tailwind, and code Playground

by Gerald Gillespie

HTML

<div>
    <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>
<p id="write">here</p>

CSS

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

JavaScript

(function($) {

    $.fn.checked = function(value,writer) {
        var stri;
        writer.html(" ");
        if (value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function() {
                this.checked = value;
                stri =stri+ ".attr('checked'):<b>" + $(this).attr('checked') + "</b><br>" + ".prop('checked'):<b>" + $(this).prop('checked') + "</b><br>" + ".is(':checked'):<b>" + $(this).is(':checked') + "</b><br><br>";
                 alert(stri);
    
            });

        } else if (value === undefined || value === 'toggle') {

            // Toggle the checkbox
            $(this).each(function() {
                this.checked = !this.checked;
                stri = stri+".attr('checked'):<b>" + $(this).attr('checked') + "</b><br>" + ".prop('checked'):<b>" + $(this).prop('checked') + "</b><br>" + ".is(':checked'):<b>" + $(this).is(':checked') + "</b><br><br>";
                // alert(stri);
            });
        }
       writer.html(stri);

    };

})(jQuery);

$(function() {

    $('#check').change(function() {
        $(':checkbox').checked(true,$('#write'));

    });

    $('#uncheck').change(function() {
        $(':checkbox').checked(false,$('#write'));
    });

    $('#toggle').change(function() {
        $(':checkbox').checked('toggle',$('#write'));
    });


    $('button').click(function() {
        $(this).trigger('click');

    }).change();
});