单选按钮Knockoutjs(Radio buttons Knockoutjs)

我有2个值，我从服务器A获取和B.我只能有一次一个真实的。

同样我需要的是在同一时间只有这么一个真正的价值要检查的电台之一。

 var viewModel = { radioSelectedOptionValue: ko.observable("false"), A: ko.observable("false"), B: ko.observable("false") }; ko.applyBindings(viewModel);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> <div class='liveExample'> <h3>Radio View model</h3> <table> <tr> <td class="label">Radio buttons:</td> <td> <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label> <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label> </td> </tr> </table> A-<span data-bind="text: A"></span> B-<span data-bind="text: B"></span> </div>

Answer 1:

该checked结合的作品不同的单选按钮和复选框：

从文档：

单选按钮，KO将设置当且仅当所述参数值等于单选按钮节点的要检查的元件value属性。所以，你的参数值应该是一个字符串 。

所以，你需要设置value的你输入“A”和“B”属性，然后绑定到radioSelectedOptionValue将包含“A”或“B”，这取决于选择的选项：

<label>
    <input name="Test" type="radio" value="A" 
             data-bind="checked: radioSelectedOptionValue" />
    Alpha
</label>
<label>
    <input name="Test" type="radio" value="B" 
             data-bind="checked: radioSelectedOptionValue" />
    Beta
</label>

如果你想保持你的布尔属性： A和B ，你需要让他们ko.computed （只读，可写的），这将使用/转换价值radioSelectedOptionValue ：

this.radioSelectedOptionValue = ko.observable();
this.A = ko.computed( {
        read: function() {
            return this.radioSelectedOptionValue() == "A";
        },
        write: function(value) {
            if (value)
                this.radioSelectedOptionValue("A");
        }
    }, this);

演示的jsfiddle。

Answer 2:

淘汰赛3.x中添加的CheckedValue装订选项。这允许您指定不是字符串值。

    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: true" />
    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: false" />

http://jsfiddle.net/t73d435v/

文章来源: Radio buttons Knockoutjs