Select/DeselectAllCheckboxes

12/6/2015来源:Javascript教程人气:510

Code share time! The following demo is about how to select/deselect all checkboxes, like this,

Using jQuery:

<div>
    <input type="checkbox" id="SelectAll" />check all<br />
    <input type="checkbox" name="sub" />1<br />
    <input type="checkbox" name="sub" />2<br />
    <input type="checkbox" name="sub" />3<br />
    <input type="checkbox" name="sub" />4<br />
</div>  
        var $SelectAll = $("#SelectAll");
        var $Sub = $("input[name='sub']");

        $SelectAll.click(function () {
            $Sub.PRop("checked", this.checked);
        });

        $Sub.click(function () {
            $SelectAll.prop("checked", $Sub.length == $Sub.filter(":checked").length ? true : false);
        }); 

How about turning it into a jQuery plugin:

(function ($) {
    $.fn.selectAndDeselectAllSubCheckboxes = function (options) {
        if (options == undefined || options.SubCheckboxesName == undefined) {
            alert("Parameters configuration error.");
            return;
        }
        if (options.SubCheckboxesName == null || options.SubCheckboxesName == "") {
            alert("you must assign parameter 'SubCheckboxesName' value.");
            return;
        }
        var defaultVal = {
            SubCheckboxesName: ""
        };

        var obj = $.extend(defaultVal, options);

        var $this = this;
        var $Sub = $("input[name='" + obj.SubCheckboxesName + "']");

        $this.click(function () {
            $Sub.prop("checked", this.checked);
        });

        $Sub.click(function () {
            $this.prop("checked", $Sub.length == $Sub.filter(":checked").length ? true : false);
        });
    }
})(jQuery);

 

then use the plugin:

$("#SelectAll").selectAndDeselectAllSubCheckboxes({ SubCheckboxesName: "sub" });

 

Using Knockout:

<div>
    <input type="checkbox" data-bind="checked: SelectAll" />check all<br />
    <!-- ko foreach: $data.Items -->
    <input type="checkbox" data-bind="checked: Selected" /><!-- ko text: Id --> <!-- /ko --> <br />
    <!-- /ko -->
</div> 
        function ViewModel() {
            var self = this;

            self.Items = ko.observableArray([new Item(1), new Item(2), new Item(3), new Item(4)]);
            self.SelectAll = ko.pureComputed({
                read: function () {
                    var obj = ko.utils.arrayFirst(self.Items(), function (_item) {
                        return !_item.Selected();
                    });
                    return obj == null;
                },
                write: function (value) {
                    ko.utils.arrayForEach(self.Items(), function (_item) {
                        _item.Selected(value);
                    });
                }
            });
        }

        var Item = function (id) {
            this.Id = id;
            this.Selected = ko.observable(false);
        }

        ko.applyBindings(new ViewModel());

With using Knockout, you should note these:

1.Virtual DOM elements bindings

2.Utility functions in Knockout

You can also view the codes in GitHub:

https://github.com/laixiancai/javascriptLab/blob/master/Webapplication1/Views/JQueryDemo/CheckAll.cshtml

https://github.com/laixiancai/JavascriptLab/blob/master/WebApplication1/Views/KnockoutDemo/CheckAll.cshtml

Reference:

http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

https://visualstudiomagazine.com/articles/2013/09/01/essential-knockoutjs-part-2.aspx