KnockoutJS Select Unselect all Checkbox list
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <head> <title>KnockoutJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script> </head> <body> <div> <div class="heading"> <input type="checkbox" data-bind="checked: selectedAllProduct" title="Select all/none"/> Select/Unselect All </div> <div data-bind="foreach: product"> <label> <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedProduct"/> <span data-bind="text: $data"></span><br> </label> </div> </div> <script> function MyViewModel() { this.product = [ 'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6' ]; this.selectedProduct = ko.observableArray([ 'Item2', 'Item3' ]); this.selectedAllProduct = ko.pureComputed({ read: function () { // Comparing length is quick and is accurate if only items from the // main array are added to the selected array. return this.selectedProduct().length === this.product.length; }, write: function (value) { this.selectedProduct(value ? this.product.slice(0) : []); }, owner: this }); } ko.applyBindings(new MyViewModel()); </script> </body> </html>
<!DOCTYPE html> <head> <title>KnockoutJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script> </head> <body> <div> <div class="heading"> <input type="checkbox" data-bind="checked: selectedAllProduct" title="Select all/none"/> Select/Unselect All </div> <div data-bind="foreach: product"> <label> <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedProduct"/> <span data-bind="text: $data"></span><br> </label> </div> </div> <script> function MyViewModel() { this.product = [ 'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6' ]; this.selectedProduct = ko.observableArray([ 'Item2', 'Item3' ]); this.selectedAllProduct = ko.pureComputed({ read: function () { // Comparing length is quick and is accurate if only items from the // main array are added to the selected array. return this.selectedProduct().length === this.product.length; }, write: function (value) { this.selectedProduct(value ? this.product.slice(0) : []); }, owner: this }); } ko.applyBindings(new MyViewModel()); </script> </body> </html>
Copyrights@tutorialsplane.com