KO Radio Binding

Data-binding options:

checked
disabled

Example:

In this example, the ViewModel is defined specifically for use with the radio. If the value of a radio data-binding option changes, the widgets automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

ViewModel Script	Copy Code
var viewModel = function () { this.check = ko.observable(true); };

Create View with Bound Controls:

View Markup	Copy Code
<h3 id="H1">Radio</h3> <label for="radio1">radio1</label> <input type="radio" name="radiobutton1" id="radio1" data-bind="wijradio: {checked: check}" /> <label for="radio2">radio2</label> <input type="radio" name="radiobutton1" id="radio2" data-bind="wijradio: {}" /> <label for="radio3">radio3</label> <input type="radio" name="radiobutton1" id="radio3" data-bind="wijradio: {}" /> <label for="radio4">radio4</label> <input type="radio" name="radiobutton1" id="radio4" data-bind="wijradio: {}" />

View Markup

Copy Code

<h3 id="H1">Radio</h3> 

<label for="radio1">radio1</label>
<input type="radio" name="radiobutton1" id="radio1" data-bind="wijradio: {checked: check}" /> 

<label for="radio2">radio2</label>
<input type="radio" name="radiobutton1" id="radio2" data-bind="wijradio: {}" />

<label for="radio3">radio3</label>
<input type="radio" name="radiobutton1" id="radio3" data-bind="wijradio: {}" />

<label for="radio4">radio4</label>
<input type="radio" name="radiobutton1" id="radio4" data-bind="wijradio: {}" />

Widgets

Concepts

Reference