Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML

Select All jQueryUI Widget Developed by TypeScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
25 Oct 2016GPL31 min read 10.5K   50  
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)


Written By
Founder Software Force
Hong Kong Hong Kong
I am always interested in finding innovative ways for building better applications and founded a technology company since 2003. Welcome to exchange any idea with you and if I am not too busy before deadline of projects, I will reply your emails. Also, if you willing to pay for consulting works and customized software development, you can leave me message.

Comments and Discussions

 
-- There are no messages in this forum --