标签内选中的收音机不会触发事件

Question

我试图从单选按钮列表中获取选中的值，为此我试图将选中的值加载到 observable 中。从文档来看，这是建议的方式：

<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">

如果单选按钮被选中，为什么 'checked' 事件不会触发所需的操作？

 <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" });
    }

Answer 1

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>

Answer 2

这是你想要的吗？两个单选按钮都有效：

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>