Question

我知道它已被问过100个imes，但我无法找到适合我的解决方案。

我有这些单选按钮：

<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>

正如您所看到的，我正在尝试调用名为loadFilteredHistory

的函数

就像：

一样简单

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

但是当我点击radiobutton时没有任何反应。我在这里错过了什么？为什么我不能调用这个功能？我知道这是非常小的东西，但我现在无法发现它。

Answer 1

已检查的数据绑定更多用于将当前复选框值与模型中的变量同步（双向绑定），如果您想要侦听选择，则可以绑定点击，如下所示：

<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>

然后你需要创建一个带有相应函数的模型，最后你将这些绑定应用于传递模型的ko.applyBindings。我添加了一个console.log语句，向您展示如何通过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 2

我创建了一个observable来绑定复选框：

self.selectedOption = ko.observable();

然后订阅该observable以在所选选项更改时执行您的操作：

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

您现在可以将selectedOption绑定到checked绑定处理程序：

<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>

请参阅http://jsfiddle.net/sjroesink/bt3mU/了解演示

Answer 3

试试这个 -

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

Demo

Answer 4

你错过了＃34; /输入＆＃34;代码

<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

loadFilteredHistory是viewModel的一种方法吗？根据你的片段的外观，它不是。

尝试这样的事情：

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

您可能还想澄清这是knockout.js的问题。 =）

更新：

实际上从它的外观来看，这个绑定不允许函数传递一个值。它期望一个可观察的价值。对于radiobuttons，它会将新值传递给您的observable。我已经更新了上面的代码段。

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

要在发生此更改时调用函数，您可以使用myViewModel.radioButtonValue.subscribe(loadFilteredHistory)

不能让'检查'工作

5 个答案: