JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th><input type="checkbox" data-bind="checked: SelectAll" /> </th>
<th><input type="checkbox" data-bind="checked: SelectAll2"/> </th>
</tr>
</thead>
<tbody data-bind="foreach: $data.Countries">
<tr>
<td>
<input type="checkbox" data-bind="checked: Selected" />
</td>
<td>
<input type="checkbox" data-bind="checked: Selected2" />
</td>
</tr>
</tbody>
</table>
<button data-bind="click:selectedboth">
click me
</button>
JavaScript
function CheckViewModel() {
var self = this;
self.Countries = ko.observableArray(
[
new Country("Australia"),
new Country("India"),
new Country("Russia"),
new Country("United Kingdom"),
new Country("United States")
]);
self.SelectAll = ko.computed({
read: function() {
var country = ko.utils.arrayFirst(self.Countries(), function(ctr) {
return !ctr.Selected();
});
return country == null;
},
write: function(value) {
ko.utils.arrayForEach(self.Countries(), function (ctr) {
ctr.Selected(value);
});
}
}).extend({ throttle: 1 });
self.SelectAll2 = ko.computed({
read: function() {
var country = ko.utils.arrayFirst(self.Countries(), function(ctr) {
return !ctr.Selected2();
});
return country == null;
},
write: function(value) {
ko.utils.arrayForEach(self.Countries(), function (ctr) {
ctr.Selected2(value);
});
}
}).extend({ throttle: 1 });
var cou = new Country();
self.selectedboth = function(){
if(cou.Selected(true) && cou.Selected2(true)) {
alert("you selected both please only chose one checkbox");
}
else if((cou.Selected(true) && cou.Selected2(false)) || (cou.Selected(false) && cou.Selected2(true)))
{
alert("Succesfully Submitted");
}
}
}
Country = function (name) {
this.CountyName = name;
this.Selected = ko.observable(false);
this.Selected2 = ko.observable(false);
}
ko.applyBindings(new CheckViewModel());