Com knockoutjs
Estou com uma dificuldade em pegar valores de input
dentro de uma table
para comparar ele teria que ser como um radio button
, porém são dois checkbox
como pode ser visto no html abaixo:
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>
Available Items:
<table data-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>
Observação: estou utilizando knockoutjs então essa tabela é gerando dinamicamente onde posso ter varias tabela.
Basicamente eu estou tentando fazer como se checkbox
fosse igual um radio button
em um 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>
Available Items:
<table data-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>
Bom minha questão é duplicada dessa"marcar uma checkbox e desmarcar as outras", porém uso o código e veja o que acontece, no meu eu tenho que marca todos o check para funcionar corretamente e ainda no meu projeto que o campos é gerado dinamicamente ele descamar todos os check que não deveria acontecer, no entanto quando clica no check novamente ele tem que desmarcar quando o mesmo estiver marcado.
select
com base nockeckbox
? Ou seja, se os doischeckbox
estiverem selecionados oselect
tenha um valor e, caso não estejam selecionados oselect
tenha outro valor?