Knockout checked binding

Question

So I'm trying to use a custom knockout checkbox binding to trigger visibility on some divs in a form. I'm having a difficult time figuring out why it won't work correctly. I've gotten it to the point where the initial value gets set, but then it won't reupdate. My problem is I don't seem to be able to bind the checkbox correctly.

I've got a fiddle to help this make more sense. When it loads it sets the correct values, but then subsequent clicking doesn't do anything.

I'm stumped I've looked at it for too long.

var data = true;

ko.bindingHandlers.aipchecked = {
    update: function(element, valueAccessor) {
        var options = valueAccessor();
        alert(options.value());
        if (options.value()) {
                    $(options.checked).slideDown('fast', function () { });
                    $(options.unchecked).slideUp('fast', function () { });
        } else {
                    $(options.checked).slideUp('fast', function () { });
                    $(options.unchecked).slideDown('fast', function () { });
        }
        options.value(options.value())
        //ko.bindingHandlers.checked.update(element, options.value);
      } 
};

var viewModel = {
    control:[
        {   
            checked: '#one',
            unchecked: '',
            value: ko.observable(true)
       }    
    ]
};
viewModel.control[0].value(data);
ko.applyBindings(viewModel);

The HTML

    <div data-bind="foreach: control">
<input type="checkbox" data-bind="aipchecked:{value: value,checked:checked,unchecked:unchecked}" />
    <label data-bind="text: value"></label>
</div>
    <div id="one">testing</div>

http://jsfiddle.net/gdefilippi/SuAYR/8/

V/R, Geoffrey

Thanks Robert, that got me to something I think works. http://jsfiddle.net/gdefilippi/cam2d/5/ I don't know why exactly, but it appears to work. — gdefilippi, Jun 24 '14 at 19:55
Your problem in the originally linked fiddle was using `value` binding instead of `checked` ... Changing that with some styling emphasis on the div [yields this](http://jsfiddle.net/origineil/SuAYR/9/). — Origineil, Jun 24 '14 at 19:59
@Origineil that was the original issue...you could post that as and answer... — Hackerman, Jun 24 '14 at 20:03
Wow Thanks Origineil and Robert. Origineil your answer definitely resolved my original question. Robert also thanks you post was also very helpful. — gdefilippi, Jun 24 '14 at 20:21

score 2 · Accepted Answer · answered Jun 25 '14 at 18:34

Two things which are going in your code are below -

Use 'checked' binding instead of 'value' binding in HTML, as the check event changes the state of the checkbox.

<div data-bind="foreach: control">
    <input type="checkbox" data-bind="checked:value,aipchecked:{value: value,checked:checked,unchecked:unchecked}" />
    <label data-bind="text: value"></label>
</div>
<div id="one">testing</div>

Remove the checked update binding from JS code.

var data = true;

ko.bindingHandlers.aipchecked = {
    update: function(element, valueAccessor) {
    var options = valueAccessor();
    alert(options.value());
    if (options.value()) {
            $(options.checked).slideDown('fast', function () { });
            $(options.unchecked).slideUp('fast', function () { });
    } else {
            $(options.checked).slideUp('fast', function () { });
            $(options.unchecked).slideDown('fast', function () { });
    }
    //ko.bindingHandlers.checked.update(element, options.value);
    } 
};

var viewModel = {
    control:[
        {   
            checked: '#one',
            unchecked: '',
            value: ko.observable(true)
        }    
    ]
};
viewModel.control[0].value(data);
ko.applyBindings(viewModel);

Knockout checked binding

1 Answers1