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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-带有剔除js的动态单选按钮行为，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2177字，纯文字阅读大概需要4分钟。

内容图文

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

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

内容总结

以上是互联网集市为您收集整理的javascript-带有剔除js的动态单选按钮行为全部内容，希望文章能够帮你解决javascript-带有剔除js的动态单选按钮行为所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/677974.html

来源：【匿名】