jQuery Select Deselect All Checkboxes

I needed buttons to select and deselect all check boxes in a <fieldset> on a page. This was such a recurring issue that I decided to write a jQuery plugin for it.

Usually the issue with using plugins is that they don’t work well with your current theme, so you end up fighting against it in CSS. That’s why I decided to create my own that does not add extra clutter and is fully configurable, up to the point that you can add CSS and HTML elements to it.

I wrote a jQuery plugin for selecting and deselecting all check boxes inside a fieldset that is:

• Lightweight, less than 1.7KB.
• Easy to theme, since it accepts CSS classes and HTML wrappers.
• Works well with any front end framework, including Bootstrap.
• Accepts font icons, including FontAwesome icons.
• Built with grunt.js for easy setup

jQuery SelectAll on Github

Code example

You could simply use it as

$( function() {
    $("fieldset").selectAll();
} );

But it accepts CSS classes, HTML wrappers, before and after elements so you can make it work with your own design.

$( function() {
        $("fieldset").selectAll( {

            buttonParent: "legend", // or ".classname" etc.
            buttonWrapperHTML : '<span class="pull-right"></span>',

            buttonSelectText: "Select All",
            buttonSelectBeforeHTML: '<span class="fa fa-check"></span>',
            buttonSelectAfterHTML: "",

            buttonDeSelectText: "Deselect All",
            buttonDeSelectBeforeHTML: '<span class="fa fa-close"></span>',
            buttonDeSelectAfterHTML: "",

            buttonExtraClasses: "btn btn-sm btn-default"

        } );
    } );

Bootstrap demo iframe.

Cheers!