KnockoutJS checked radio button when current row selected

Question

I have a list like below;

I would like to set radio button in user form when one of list row edit clicked.

My radio button's html like;

<form data-bind="submit: saveUser" class="form-horizontal">
    <div class="form-group">
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="Name" data-bind="value: currentUser().name" />
        </div>
    </div>


    <!--Gender-->
    <div class="form-group">
        <div class="col-md-10" data-bind="foreach: genders">
            <input type="radio" name="genderGroup" data-bind="checked: $root.radioGender, value: id" style="margin: 5px"/><span data-bind="text: name"></span>
        </div>
    </div>


    <!--Role-->
    <div class="form-group">
        <div class="col-md-10">
            <select class="form-control" data-bind="options: $root.roles, optionsText: 'name', optionsValue: 'id',value: currentUser().roleId, optionsCaption: 'Choose Component'"></select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            <button type="submit" class="btn">Save User</button>
        </div>
    </div>
</form>

and radio button's click bind is like;

self.radioGender = function (gender) {
self.currentGender(gender);
if (gender !== self.selectedGender()) {
    self.selectedGender(gender);            
    self.currentUser().genderId(gender.id());
} 
    return true;
};

finally, it's the function when Edit button clicked;

self.modifyUser = function (user) {
    self.radioGender(self.currentGender());
    self.currentUser(user);
}

I read something about checked binding but I didn't resolve the problem.

Tomalak · Answer 1 · 2017-12-29T21:05:30.527

2

You don't use click bindings with radio buttons.

ko.applyBindings({
  radioGender: ko.observable(0),
  genders: [
    {id: 0, name: 'undefined'},
    {id: 1, name: 'female'},
    {id: 2, name: 'male'}
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: genders">
  <label>
    <input type="radio" data-bind="checked: $root.radioGender, value: id"/><span data-bind="text: name"></span>
  </label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Also: You don't need name attributes with knockout. But you should read about the uniqueId and uniqueFor custom bindings to get label elements to work.

Using the value binding with $data gives you this behavior:

ko.applyBindings({
  radioGender: ko.observable(0),
  genders: [
    {id: 0, name: 'undefined'},
    {id: 1, name: 'female'},
    {id: 2, name: 'male'}
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: genders">
  <label>
    <input type="radio" data-bind="checked: $root.radioGender, value: $data"/><span data-bind="text: name"></span>
  </label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

I find this more useful than confining myself to a single property of the object in question, but it's not compatible to traditional (non-Ajax) form submits.

edited Dec 29 '17 at 21:05

answered Dec 29 '17 at 20:27

Tomalak

332,285
67
532
628

But my main object is CurrentUser that's why I use click binding because when the clicked the radio I assign gender value to my CurrentUser object. I updated my HTML form. can you check, please. – arslanaybars Dec 29 '17 at 20:34
When I editing and updating I am using CurrentUser object. – arslanaybars Dec 29 '17 at 20:35
You still don't need the click binding. Maybe you need `with: currentUser` on the outer `
`
– Tomalak Dec 29 '17 at 20:43
You want to set the `currentUser` observable on `click` of the Edit button. This will redraw the form when it has the `with: currentUser` binding. And after that the `checked` and `value` bindings shown in my answer simply work. – Tomalak Dec 29 '17 at 20:49
It looks complicate for me. in my case genders loaded from api. thank you for your help. – arslanaybars Dec 29 '17 at 21:15
I tried to implement your suggestion. now it's almost working but still can't checked radio button when I click edited. sample scene: I open the page the form is empty and when I click to edit. name and role is filled but gender radio still empty :/ @tomalak – arslanaybars Dec 29 '17 at 21:20

Try to output the viewmodel to a `

`like I show in my examples. It might help you find out what's going on.

– Tomalak Dec 29 '17 at 21:29

score 0 · Answer 2 · answered Dec 29 '17 at 23:23

0

You should be able to bind your radio button directly to the genderId observable in currentUser:

data-bind="checked: $parent.currentUser().genderId, value: id"

answered Dec 29 '17 at 23:23

Michael Best

16,623
1
37
70

KnockoutJS checked radio button when current row selected

2 Answers2