check/un-check/toggle multiple check boxes

by katalin_2003

HTML

<div>
  <p>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
  </p>
</div>
<div>
  <p>
    <button id="check">Check</button>
    <button id="uncheck">Un-Check</button>
    <button id="toggle">Toggle</button>
  </p>
</div>

CSS

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

p {
    text-align: center;
}

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 () {
        $(':checkbox').checked(true);
    });

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

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


});