Select/DeselectAllCheckboxes

2024-04-27 15:02:13

字体：大中小

来源：转载

供稿：网友

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