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>

Hatchway

Updated: jsfiddle.net/hamsaya/cyBQH/2 – Hatchway

This is another wonderful answer: https://mcmap.net/q/447191/-knockout-bootstrap-3-radio-buttons – Morville

Answer 1

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.

Arndt

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

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 jsfiddle.net/p8nSe/1 to demo it. – Arndt

Answer 2

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/

Printery

Tim, perhaps we could meet to discuss this further? I am struggling with this on the new Hedges tab. – Coaxial

This is REALLY nice for when you are using a radio button as a switch. Perfect. – Substage