Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Select All jQueryUI Widget Developed by TypeScript

5.00/5 (1 vote)
25 Oct 2016GPL31 min read 11K   51  
Select All jQueryUI widget developed by TypeScript using Visual Studio 2015

Select All Widget Demo

Introduction

This is a simple jQueryUI widget that adds SELECT ALL function to Checkbox input on webpage and it is developed using TypeScript in Visual Studio 2015.

Using the Code

You can just pull the source files from github at https://github.com/matthewycso/jquery-select-all.git.

The JavaScript file jquery-select-all.js is the compiled JavaScript from TypeScript for the jquery-select-all widget of JQueryUI.

To use this widget, in your webpage, add references to jQuery, jQueryUI and file jquery-select-all.js as shown below. Then use jQuery in JavaScript to select the HTML element that will be assigned the select all function, e.g., checkbox with id="selectALL" in the below example, and apply the selectall method.

The widget has only one option checkboxSelector which is used to select all checkboxes that will be changed by the jquery-select-all widget when it toggles for changing.

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.select-all.js"></script>
<script src="app.js"></script>

//... In your page javascript section
$(function () {
    // Set selectall jquery ui widget
    $('#selectALL').selectall({ checkboxSelector: '#chooseFavories :checkbox' });   
})

Points of Interest

The selectall Widget

The code shown below is all we needed to create a widget with the select all feature.

Note that when any of the affected checkbox changed by user, the select all widget attached to checkbox usually needs to be unchecked.

As TypeScript requires every type except any have all defined properties declared or else it will complain during compilation. The last few lines below are to extend existing JQuery interface with new selectall method.

JavaScript
(function ($: JQueryStatic) {
    $.widget("sforce.selectall", {

        options: {
            checkboxSelector: null
        },

        _create: function () {
            let target: JQuery = this.element;
            let $checkboxes = this.options.checkboxSelector !== null ?
                $(this.options.checkboxSelector) :
                $(this.element).closest('div, p, td, body').find(':checkbox');

            target
                .addClass("select-all")
                .on('change.select-all.sforce', function () {
                    $checkboxes.not(target)
                        .prop('checked', target.prop('checked'))
                        .trigger('change') ; 
                });
            //uncheck "select-all" if any checkbox unchecked
            $checkboxes.on('change.select-all.sforce', function () {
                if (!$(this).is(target) && !$(this).prop('checked'))
                    target.prop('checked', false);
            });
        },

        _destroy: function () {
            this.element
                .removeClass("select-all")
                .off('select-all.sforce');
        }
    });

})(jQuery);

interface JQuery {
    selectall: (options?: { checkboxSelector: JQuery|string }) => JQuery;
}

History

  • 2016-10-25: Version 1.0

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)