我正在尝试从单选按钮列表中获取选中的值,为此我正在尝试将选中的值加载到可观察量中。从文档来看,这是建议的方法:
<input type="radio" name="type" data-bind="value:ct.value, checked: $root.selectedtype" required>
但是,这在我的情况下不起作用。我的收音机周围有一个标签,如果我在标签上添加单击事件,它会正确填充可观察selectedtype
,这样我就可以获得选定的值,例如:
<label class="btn btn-outline-dark" data-bind="click:$root.selectedtype">
如果单选按钮被选中,为什么"选中"事件不会触发所需的操作?
<label for="email">Company Type</label>
<div data-toggle="buttons" class="form-group label-block">
<div class="row">
<div class="col-sm-6" data-bind="foreach: { data: companytype, as: 'ct' }">
//--> this way it works <label class="btn btn-outline-dark" data-bind="click:$root.selectedtype">
<input type="radio" name="type" data-bind="value:ct.value" required>
//--> this way it does not work <input type="radio" name="type" data-bind="value:ct.value, checked: $root.selectedtype" required>
<span data-bind="text: ct.label"></span>
</label>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
Selected: <span data-bind="text: selectedtype().value"></span>-
在我的模型中:
var companytype = ko.observableArray([]);
var selectedtype = ko.observable('');
var init = function () {
getItemList();
companytype.push({ "label": "LTD", "value": "1" });
companytype.push({ "label": "PLC", "value": "2" });
companytype.push({ "label": "LLP", "value": "3" });
companytype.push({ "label": "Sole Trader", "value": "4" });
}
var companytype = ko.observableArray([]);
var selectedtype = ko.observable('');
var init = function() {
//getItemList();
companytype([
{ "label": "LTD", "value": "1" },
{ "label": "PLC", "value": "2" },
{ "label": "LLP", "value": "3" },
{ "label": "Sole Trader", "value": "4" }
]);
}
init();
var viewModel = { companytype, selectedtype };
ko.applyBindings(viewModel);
.btn {
border: 1px solid black;
padding: 2px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="email">Company Type</label>
<div data-toggle="buttons" class="form-group label-block">
<div class="row">
<div class="col-sm-6" data-bind="foreach: { data: companytype, as: 'ct' }">
<label class="btn btn-outline-dark" data-bind="click: function(){ $root.selectedtype($data); return true; }">
<input type="radio" name="type" data-bind="checked: $root.selectedType" required>
<span data-bind="text: ct.label"></span>
</label>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
Selected: <span data-bind="text: ko.toJSON(selectedtype)"></span>
可以使用选中绑定,但由于标签和单选按钮控件都尝试处理单击事件,因此它们相互争斗。您需要让标签的单击函数返回"true",以便事件不会继续向下到单选控件。
<label class="btn btn-outline-dark" data-bind="click: function(){ $root.selectedtype($data); return true; }">
<input type="radio" name="type" data-bind="checked: $root.selectedType" required>
<span data-bind="text: ct.label"></span>
</label>
这是你想要的吗?两个单选按钮都正常工作:
var VM = function(){
var self=this;
self.companytype = ko.observableArray([]);
self.selectedtype = ko.observable("");
self.init = function () {
//getItemList();
self.companytype.push({ "label": "LTD", "value": "1" });
self.companytype.push({ "label": "PLC", "value": "2" });
self.companytype.push({ "label": "LLP", "value": "3" });
self.companytype.push({ "label": "Sole Trader", "value": "4" });
}
}
var vm = new VM();
vm.init();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label for="email">Company Type</label>
<div data-toggle="buttons" class="form-group label-block">
<div class="row">
<div class="col-sm-6" data-bind="foreach: { data: companytype, as: 'ct' }">
<input type="radio" name="type" data-bind="value:ct.value, checked: $root.selectedtype" required>
<span data-bind="text: ct.label"></span>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
Selected: <span data-bind="text: selectedtype()"></span>