Radio buttons Knockoutjs

Question

I have 2 values that I get from server A and B. I can only have one true at a time.

Again what I need is one of the radios to be checked at a time so one true value only.

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>

This is another wonderful answer: http://stackoverflow.com/a/20080917/683157 — kuboon, Oct 07 '14 at 07:44

score 32 · Answer 1 · answered Sep 08 '15 at 16:13

32

Knockout 3.x added the checkedValue binding option. This allows you to specify values other than strings.

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

answered Sep 08 '15 at 16:13

Tim Yonker

403
4
7

Tim, perhaps we could meet to discuss this further? I am struggling with this on the new Hedges tab. – bubbleking Feb 03 '17 at 21:48
2

This is REALLY nice for when you are using a radio button as a switch. Perfect. – CarComp Nov 28 '18 at 13:16

score 30 · Accepted Answer · edited Apr 28 '13 at 07:14

The checked binding works differently for radio buttons and checkboxes:

From the documentation:

For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string.

So you need to set the value attribute of your inputs to "A" and "B" and then bind to the radioSelectedOptionValue which will contain "A" or "B" depending on which options is selected:

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

If you want to keep your boolean properties: A and B, you need to make them ko.computed (read-only, writable) which will use/convert the value of the radioSelectedOptionValue:

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

Demo JSFiddle.

This is great but when i get my value from server it is already false or true I want the users radio button to be selected. I don't think this will check that. — NoviceDeveloper, Apr 29 '13 at 03:20
Because in my sample A and B are writable computeds you can assign true or false to them. I've added a sample `loadDataFromServer` method in http://jsfiddle.net/p8nSe/1/ to demo it. — nemesv, Apr 29 '13 at 06:02

Radio buttons Knockoutjs

2 Answers2

Linked