With knockoutjs
I'm having a hard time getting values of input inside a table to compare it would have to be as radio button , however they are two checkbox as can be seen in #
function DemoItem(id, name) {
var self = this;
self.id = ko.observable(id);
self.Name = ko.observable(name);
self.Selected = ko.observable(false);
}
function ViewModel() {
var self = this;
self.availableItems = ko.observableArray();
self.associatedItemIds = ko.observableArray();
self.init = function () {
self.availableItems.push(new DemoItem(1, 'One'));
self.availableItems.push(new DemoItem(2, 'Two'));
self.availableItems.push(new DemoItem(3, 'Three'));
self.availableItems.push(new DemoItem(4, 'Four'));
self.availableItems.push(new DemoItem(5, 'Five'));
};
self.toggleAssociation = function (item) {
if (item.Selected() === true) console.log("dissociate item " + item.id());
else console.log("associate item " + item.id());
item.Selected(!(item.Selected()));
return true;
};
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>AvailableItems:<tabledata-bind="foreach: $root.availableItems">
<tr><td><input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation" />
<span data-bind="text: ' ' + Name()"></span>
</td></tr>
</table>
<br/>
Associated Item Ids:
<div data-bind="foreach: $root.associatedItemIds">
<span data-bind="text: $data"></span>
<br/>
</div>Note: I'm using knockoutjs then this table is dynamically generating where I can have multiple tables.
Basically I'm trying to do as if checkbox was equal to radio button in a radio group
function DemoItem(id, name) {
var self = this;
self.id = ko.observable(id);
self.Name = ko.observable(name);
self.Selected = ko.observable(false);
}
function ViewModel() {
var self = this;
self.availableItems = ko.observableArray();
self.associatedItemIds = ko.observableArray();
self.init = function () {
self.availableItems.push(new DemoItem(1, 'One'));
self.availableItems.push(new DemoItem(2, 'Two'));
self.availableItems.push(new DemoItem(3, 'Three'));
self.availableItems.push(new DemoItem(4, 'Four'));
self.availableItems.push(new DemoItem(5, 'Five'));
};
self.toggleAssociation = function (item) {
if (item.Selected() === true) console.log("dissociate item " + item.id());
else console.log("associate item " + item.id());
item.Selected(!(item.Selected()));
return true;
};
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
function marcaDesmarca(caller) {
var checks = document.querySelectorAll('input[type="checkbox"]');
for(let i = 0; i < checks.length; i++) {
checks[i].checked = checks[i] == caller;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>AvailableItems:<tabledata-bind="foreach: $root.availableItems">
<tr><td><input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation" onclick="marcaDesmarca(this)"/>
<span data-bind="text: ' ' + Name()"></span>
</td></tr>
</table>
<br/>
Associated Item Ids:
<div data-bind="foreach: $root.associatedItemIds">
<span data-bind="text: $data"></span>
<br/>
</div>Well my question is duplicated from this mark a checkbox and uncheck the other , but I use the code and see what happens, in my I have to mark all the check to work correctly and still in my project that the fields is generated dynamically he flush all the check that should not happen, however when you click the check again it has to uncheck when it is checked.