Click here to Skip to main content
14,176,878 members
Click here to Skip to main content
Add your own
alternative version

Stats

6.4K views
46 downloads
Posted 25 Oct 2016
Licenced GPL3

Select All jQueryUI Widget Developed by TypeScript

, 25 Oct 2016
Rate this:
Please Sign up or sign in to vote.
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.

<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.

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

Share

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.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190526.1 | Last Updated 25 Oct 2016
Article Copyright 2016 by Matthew So (Hong Kong)
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid