你的位置:首页 > Java教程

[Java教程]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