Select/Deselect All Checkboxes

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> 

$("#SelectAll").click(function () {
            $("input[name=‘sub‘]").prop("checked", this.checked);
        });

        $("input[name=‘sub‘]").click(function () {
            var $subs = $("input[name=‘sub‘]");
            $("#SelectAll").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
        });

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

Reference:

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

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