KnockoutJS Select Unselect all Checkbox list
KnockoutJS Select Unselect all Checkbox list– It is very common we need Checkbox list with select/unselect functionality. We can use writable computed observables to create the select/unselect All checkbox list. Here in this article, we are going to explain how you can create select/unselect all checkbox functionality. You can also use our online editor to edit and run the example online.
KnockoutJS Select Unselect all Checkbox list | Check All | Uncheck All Example
You can create the Check All/Uncheck all in KnockoutJs Using writable computed observables simply as below –
KnockoutJS Select Unselect all Checkbox list Example:
<!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>
|
If you run the above example it will produce output something like this-
Advertisements
