Dynamically updating multiple observables on checkbox click

Question

I've got a scenario in which I've got multiple checkboxes, and for each checkbox, all other checkboxs' values should change (and their corresponding observables should be updated) to false whenever any other checkbox is selected. Basically, the checkboxes should behave like radio buttons, but each is tied to a database field.

<input type="checkbox" data-bind="checked: NameIsJohn">John</input>
<input type="checkbox" data-bind="checked: NameIsJerry">Jerry</input>
<input type="checkbox" data-bind="checked: NameIsJenny">Jenny</input>
<input type="checkbox" data-bind="checked: NameIsJake">Jake</input>
<input type="checkbox" data-bind="checked: NameIsJeffrey">Jeffrey</input>
<input type="checkbox" data-bind="checked: NameIsJack">Jack</input>

var vm = function() {
    this.NameIsJohn = ko.observable();
    this.NameIsJerry = ko.observable(true);
    this.NameIsJenny = ko.observable();
    this.NameIsJake = ko.observable();
    this.NameIsJeffrey = ko.observable();
    this.NameIsJack = ko.observable();   
};

One approach would be to use jQuery to attach a click handler to every checkbox, but this doesn't seem update the underlying observables.

//var variable = the input element
$variable.filter(':checked').not(this).removeAttr('checked');

Another approach would be to use a custom Knockout function, or some sort of custom subscription. What I came up with works, but it's hacky. Imagine if there were ten or more observables to update!

vm.ChangeCheckbox = function (CheckboxName) {
                vm.NameIsJohn(false);
                vm.NameIsJerry(false);
                vm.NameIsJenny(false);
                vm.NameIsJake(false);
                vm.NameIsJohn(false);
                vm.NameIsJohn(false);
                if (CheckboxName === 'John') {
                    vm.NameIsJohn(true);
                }   else if (CheckboxName === 'Jerry') {
                    vm.NameIsJerry(true);
                } ...
//etc.

Is there a more dynamic way of updating all of the observables in this set when a checkbox is clicked?

Try this solution: http://stackoverflow.com/a/8616669/932282 — mhu, Mar 06 '15 at 19:15
@mhu It looks like this solution requires the manual construction of a pretty big observable array - so I'm not sure if the approach offers me any advantage over the `ChangeCheckbox()` function that I've got in my question. Both approaches seem wordy; not really dynamic — alex, Mar 06 '15 at 19:35
This can be a start http://jsfiddle.net/supercool/f8o3ua9k/1/ . it's already 2am here gotta go . cheers — super cool, Mar 06 '15 at 20:22

Roy J · Accepted Answer · 2015-03-06T20:47:42.640

1

It seems sensible to me to have one variable that indicates which is the checked box -- you would set it upon a click -- and all the buttons' checked properties are attached to computed observables whose function is basically "am I the one?"

this.NameIsJohn = ko.computed(isIt('John'));

edited Mar 06 '15 at 20:47

answered Mar 06 '15 at 20:06

Roy J

42,522
10
78
102

Thanks, I'll give this a shot. Also, I think the JSFiddle you posted is the same as mine. – alex Mar 06 '15 at 20:34
Here's a nicer fiddle, where I made an array of namebuttons. https://jsfiddle.net/f8o3ua9k/3/ – Roy J Mar 06 '15 at 20:40

Dynamically updating multiple observables on checkbox click

1 Answers1