Can't make 'checked' working

Question

I know that it has been asked 100s of imes, but I can't find a solution fitting in my case.

I have these radio buttons:

<div class="left-floated-box" >
    <input type="radio" name="options" value="1" data-bind="checked:loadFilteredHistory">1
</div>
<div class="left-floated-box" >
    <input type="radio" name="options" value="2" data-bind="checked:loadFilteredHistory">2
</div>

as you can see I'm trying to call a function named loadFilteredHistory

and it is as simple as:

loadFilteredHistory = function(){
   console.log("I'm inside of teh function");
};

But when I click on the radiobutton nothing happens. What am I missing here? Why I can't call the function? I know that it is something extremely small, but I'm not able to spot ot it right now.

Answer 1

I'd create a observable to bind to the checkbox:

self.selectedOption = ko.observable();

Then subscribe to that observable to perform your actions when the selected option changes:

self.selectedOption.subscribe(function(newValue) {
    console.log('selectedOption change', newValue);
});

You can now just bind selectedOption to the checked bindinghandler:

<div class="left-floated-box" >
    <input type="radio" name="options" value="1" data-bind="checked:selectedOption" />1
</div>
<div class="left-floated-box" >
    <input type="radio" name="options" value="2" data-bind="checked:selectedOption" />2
</div>

See http://jsfiddle.net/sjroesink/bt3mU/ for a demo

Answer 2

The checked databinding is more for synchronizing (two-way-binding) the current checkbox value with a variable in your model, if you want to listen for selects you can bind the click instead like this:

<div class="left-floated-box" >
    <input type="radio" name="options" value="1" data-bind="click:loadFilteredHistory">1
</div>
<div class="left-floated-box" >
    <input type="radio" name="options" value="2" data-bind="click:loadFilteredHistory">2
</div>

Then you need to create a model with the corresponding function, and finally you apply these bindings with ko.applyBindings passing in your model. I added a console.log-statement to show you how you can get a hold of the clicked checkbox through event.currentTarget.

var viewModel = {
    loadFilteredHistory: function(model, event) { 
        console.log("Inside the function");
        console.log("Clicked checkbox = " + event.currentTarget.value);
        return true;
    }
}
ko.applyBindings(viewModel);

Answer 3

try this -

$('.left-floated-box input').click(function() {
   if($('input').is(':checked')) { alert("it's checked"); }
});

Demo

Answer 4

You missed " /input " code

<div class="left-floated-box">
    <input type="radio" id="button" name="options" value="1">1 </input>
</div>

<div class="left-floated-box">
    <input type="radio" id="button" name="options" value="2">2 </input>
</div>


$('#button').click(function() {
  alert("I'm inside of teh function");
});

Answer 5

Is loadFilteredHistory a method of your viewModel? By the looks of your snippet it's not.

Try something like this:

var myViewModel = { radioButtonValue: ko.observable() } ko.applyBindings(myViewModel);

You may also want to clarify that this is knockout.js question. =)

UPDATE:

Actually from the looks of it, this binding does not allow function to be passed a value. It'expects an observable value. For radiobuttons it will pass new value to your observable. I've updated snippet above.

http://knockoutjs.com/documentation/checked-binding.html

To call a function when this change occurs you may use myViewModel.radioButtonValue.subscribe(loadFilteredHistory)