javascript-带有剔除js的动态单选按钮行为

我有一个按钮可以创建如下单选按钮：

<input value="&uparrow;" type="button" data-bind=" click: moveUp"/>
<input value="&downarrow;" type="button" data-bind="click: moveDown"/>
<input data-bind="value: selectedradio" />
<div data-bind="foreach: radios">
    <div data-bind="attr:{id:radioid} ">
       <input type="radio" name="group" data-bind="value:radioid, checked:$parent.selectedradio"/>
     </div>
</div>
<div>
     <input type="button" value="+" data-bind="click: addRadio"/>
</div>

创建单选按钮时,它们分别分配有唯一索引,并且我将选中的属性绑定到父级上的名为selectedradio的属性

我可以通过html输入来修改selectedradio,并且所选无线电会更改,但是如果我以编程方式修改值,则不会更改.

我在这里创建了一个小提琴：http://jsfiddle.net/8vVeU/

这是供参考的javascript：

function Radio(id){
    this.radioid = ko.observable(id);
}

 function ViewModel() {
        var self = this;
        self.selectedradio = ko.observable(0);
        self.radios = ko.observableArray([new Radio(0),new Radio(1),new Radio(2),new Radio(3)]);

        self.addRadio = function() {
            self.radios.push(new Radio());
            self.reIndex();
         };
         self.moveUp = function() {
            self.selectedradio(self.selectedradio()-1)
            self.reIndex();
          };
        self.moveDown = function() {
            self.selectedradio(self.selectedradio()+1)
            self.reIndex();
          };

        self.reIndex = function() {
            $.each(self.radios(), function(i, r) {
                r.radioid(i);             
          });
        }


}
ko.applyBindings(new ViewModel());

我该如何解决这个问题？

解决方法:

对于单选按钮,默认情况下checked binding将输入的value属性(是字符串)与model属性进行比较.

因此,您需要将字符串存储在所选的radio中：

self.moveUp = function(r) {
    r=parseInt(r,10);
    self.selectedradio((parseInt(self.selectedradio())-1).toString())
    self.reIndex();
};
self.moveDown = function(r) {
    r=parseInt(r,10);
    self.selectedradio((parseInt(self.selectedradio())+1).toString())
    self.reIndex();
};

它可与文本框一起使用,因为它将用输入的字符串填充选定的收音机.

演示JSFiddle.

或者,您可以更改默认行为,并可以通过checkedValue选项告诉KO使用其他属性作为复选框的值：

<input type="radio" name="group" data-bind="value:radioid, 
       checked:$parent.selectedradio, checkedValue: radioid"/>

在这种情况下,您不需要更改moveUp和moveDown方法,因为现在selectedradio将始终包含整数,但是由于您的文本框仍将selectedradio设置为字符串,因此它将不再起作用.

演示JSFiddle.

标签：knockout-js,javascript,radio-button
来源： https://codeday.me/bug/20191029/1963770.html