單擊另一個單選按鈕時更改單選按鈕的值

Question

我需要創建一個選項列表，當我單擊一個選項時，我將該值從「X」更改爲關閉所有其他選項。它運行良好，除了我選擇的選項不保持選定狀態。有誰知道什麼是錯的？

var data = [{ 
 
    name: "CheckBox1", 
 
    status: " " 
 
}, { 
 
    name: "CheckBox2", 
 
    status: "X" 
 
}, { 
 
    name: "CheckBox3", 
 
    status: "X" 
 
}]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.list = ko.mapping.fromJS(data); 
 

 
    self.change = function(data) { 
 
    for (i = 0; i < self.list().length; i++) 
 
     self.list()[i].status("X"); 
 
    data.status(" "); 
 
    return true; 
 

 
    } 
 

 
} 
 

 
ko.applyBindings(new ViewModel(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 

 

 
<!--ko foreach: $root.list--> 
 
<!-- ko with: $data --> 
 
<label data-bind="text: name"></label> 
 
<input type="radio" data-bind="checkedValue: status() === ' ', click:$root.change" /> 
 
<!--/ko--> 
 
<!--/ko--> 
 

 
<!--ko foreach: $root.list--> 
 
<!-- ko with: $data --> 
 
<p data-bind="text: name"></p> 
 
<p data-bind="text: status"></p> 
 

 
<!--/ko--> 
 
<!--/ko-->

Answer 1

https://jsfiddle.net/ptk2jf8v/20/

<input type="radio" name="optradio" data-bind="checkedValue: status() === ' ', click:$root.change,value:status" /> 

和點擊處理程序返回true，將這樣的伎倆

來源：http://knockoutjs.com/documentation/checked-binding.html

如果您的綁定還包含checkedValue，則會定義檢查的綁定使用的值 而不是元素的value屬性。 如果您希望該值不是 字符串（例如整數或對象），或者您希望動態設置值 ，這非常有用。

在你的情況下，當狀態爲空時標記爲檢查狀態。

而且單擊事件也搞亂了單選按鈕上的默認動作。

從knockout js radio button click event reset selection

默認情況下，淘汰賽將阻止點擊事件採取任何 默認操作

於是久違從點擊事件屬實會幫助冒泡。

Answer 2

如果重新綁定單選按鈕的方式（如敲除網站上的），您不必手動更新檢查的值。由於您的檢查綁定是一個布爾表達式，檢查的綁定實際上是單向綁定而不是雙向綁定。數據將驅動界面，但界面不會驅動數據。這就是爲什麼你必須在點擊功能中手動「檢查」框。也就是說，爲了最小化修改你的例子，我能夠通過一些調整來實現它。

編輯：現在意識到雖然這使得樣本「工作」，它只是打破了檢查綁定。所以......如果你要更新數據，它不會驅動控件。

刪除檢查綁定中的調用括號。這是更新數據後單選按鈕沒有更新的原因的一部分。

<input type="radio" name="optradio" data-bind="checked: status == ' ', click: $root.change" /> 

修改集合的值，以該控件被綁定，而不是傳入的數據參數。如果不直接修改集合，則不會更新控件引用的對象。它基本上就像通過價值傳遞vs傳遞參考事物。

for (i = 0; i < self.list().length; i++){ 
    if(self.list()[i].name() == data.name()){ 
    self.list()[i].status(' '); 
    } 
    else{ 
    self.list()[i].status('X') 
    } 
} 

var data = [{ 
 
    name: "CheckBox1", 
 
    status: " " 
 
}, { 
 
    name: "CheckBox2", 
 
    status: "X" 
 
}, { 
 
    name: "CheckBox3", 
 
    status: "X" 
 
}]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.list = ko.mapping.fromJS(data); 
 

 
    self.change = function(data) { 
 
    for (i = 0; i < self.list().length; i++){ 
 
    \t if(self.list()[i].name() == data.name()){ 
 
     \t self.list()[i].status(' '); 
 
     } 
 
     else{ 
 
     \t self.list()[i].status('X') 
 
     } 
 
    } 
 
    for (i = 0; i < self.list().length; i++) 
 
     alert(self.list()[i].status()); 
 

 
    return true; 
 
    } 
 

 
} 
 

 
ko.applyBindings(new ViewModel(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 

 

 
<!--ko foreach: $root.list--> 
 
<!-- ko with: $data --> 
 
<label data-bind="text: name"></label> 
 
<input type="radio" name="optradio" data-bind="checked: status === ' ', click:$root.change" /> 
 
<!--/ko--> 
 
<!--/ko-->