checked data binding is not working for radio buttons in knockout js

Question

<div id="distance-filter" data-bind="foreach: model.distance">
<p ><input type="radio" value="value" name="distance" data-bind="checked: model.check"> <span data-bind="text:model.check"></span></p>
</div>

the checked data binding is not working my model is as follows

var model= {    
    filter_list: ko.observableArray([{filter:'restaurant'},{filter:'hospital'},{filter:'atm'},{filter:'cafe'}]),
    fav_list: ko.observableArray([{fav:'Pizzahut'},{fav:'Dominos'},{fav:'Barista'}]),
     distance: ko.observableArray([{value: 500},{value: 1000},{value: 5000},{value: 10000}]),
     check: ko.observable(1000)

};

Answer 1

The problem is that you're not setting the correct value of each item. Rather they all have the value "value" .

Take out

value="value"

and change your data-bind to

data-bind="checked: model.check, checkedValue: value"

Answer 2

This is probably not what you ultimately want to do, but it at least gets the check doing something interesting.

Although you can refer to model because it is a global variable, you should not. (It should not be a global variable.) Instead of model.distance , just use distance in your foreach binding. Within the foreach, the context changes. To refer to checked (which isn't defined within each distance object), you need to use $parent.checked . You can use value directly, because the context is the current distance object.

What you probably want to do is have each button labeled with its own value , and then print the value of checked outside the foreach to indicate what its current value is. As written, the value of checked is printed beside each button, and they all change when you change which button is selected.

Also: the value of checked should be a string, as values of input items are string.

 var model = { distance: ko.observableArray([{ value: 500 }, { value: 1000 }, { value: 5000 }, { value: 10000 }]), check: ko.observable('1000') }; ko.applyBindings(model);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="distance-filter" data-bind="foreach: distance"> <p> <input type="radio" name="distance" data-bind="attr: { value: value }, checked: $parent.check"> <span data-bind="text:$parent.check"></span> </p> </div>