Click here to Skip to main content
14,970,948 members
Articles / Web Development / HTML
Posted 25 Oct 2016



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
Select All jQueryUI widget developed by TypeScript using Visual Studio 2015

Select All Widget Demo


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

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.

<script src=""></script>
<script src=""></script>
<script src=""></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.

(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');

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

        _destroy: function () {


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


  • 2016-10-25: Version 1.0


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


About the Author

Matthew So (Hong Kong)
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 --