Question

我正在尝试解决如果第二次点击/选择单选按钮时取消选中的方法。

所以，如果我有4个单选按钮，并且选择了按钮1，并且用户再次点击按钮1，它将取消选择＆＃34;所以没有选择任何单选按钮。

我有这个代码，当＆＃34;已经被选中＆＃34;单击单选按钮：

this.selectedAgeBreakdown.subscribe((newVal) => {
  Alert("Clicked!";
});

有人可以给我任何想法吗？

Answer 1

单选按钮通常不支持此行为;没有办法取消选择其中任何一个。如果您的页面默认状态为“没有选定的无线电”，那么这是一个特殊状态，一旦您点击一个状态，通常无法返回。这不是特定于Knockout的。见这个例子：

label:hover { cursor: pointer; background-color: pink; }

<label><input type="radio" value="1" name="opt" /> Option 1</label>
<label><input type="radio" value="2" name="opt" /> Option 2</label>

请注意，一旦您选择其中一个，您就可以不取消选择那个。

使用Knockout（或一般的JavaScript），可以解决这个问题。如果您处理click事件，则可以对已经检查过的选项做出反应。

var ViewModel = function() {
  var self = this;
  self.opt = ko.observable(null);  
  
  self.tryDeselect = function(viewModel, event) {
    if (event.target.value === self.opt()) { 
      self.opt(null);
      event.target.checked = false; 
    }
    return true; 
  };
};

ko.applyBindings(new ViewModel());

label:hover { cursor: pointer; background-color: pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<label><input type="radio" value="1" data-bind="click: tryDeselect, checked: opt" /> Option 1</label>
<label><input type="radio" value="2" data-bind="click: tryDeselect, checked: opt" /> Option 2</label>
<hr>
Debug info: <pre data-bind="text: ko.toJSON($root)"></pre>

从UX的角度来看，您还可以考虑使用复选框列表：

优势：用户希望能够取消选中一个复选框（使用单选按钮期望具有该功能）;
优点：不需要在视图模型中处理DOM内容，只需要在检查其中一个时处理“取消选中”其他内容的普通KO绑定;
缺点：UX-wise互斥复选框不是（没有添加一些视觉提示）用户通常期望的内容;
缺点：可能需要更多代码才能获得相互排斥的位;

取消选中所选的单选按钮

1 个答案: