检测无线电/复选框的变化

Question

我正在重写我的一个插件，我想尝试解决我们过去遇到的问题。

jsFiddle 演示

当您通过单击复选框选中该复选框时，将触发更改事件。它正在控制台中记录。

但是，如果您使用左侧的按钮，则不会触发"更改"。

使用该插件，如果用户使用已有的代码动态选中复选框或单选按钮，我希望能够检测到此更改。

有什么想法吗？

.HTML：

<input type="button" name="check" value="Checkbox" />
<input type="checkbox" name="newsletter" value="true" />​

j查询：

$(function() {
    // This toggle checks and unckecks the box
    $('input:button').toggle(function() {
        $('input:checkbox').prop("checked", true);
    }, function() {
        $('input:checkbox').prop("checked", false);
    });

    // Detects change of checkbox           
    $('input:checkbox').on("change", function() {
        console.log('checked!');
    });
});​

Answer 1

最简单的解决方法是手动触发更改事件：

$('input:checkbox').prop("checked", true).change();

http://jsfiddle.net/HruGP/1/

编辑：您还可以简化按钮代码而不是使用toggle，只需使用click并将checked属性分配给与其当前值相反的值：

$('input:button').on('click',function() {
    var $checkbox = $('input:checkbox');
    $checkbox.prop('checked', !$checkbox.is(':checked')).change();
});

http://jsfiddle.net/HruGP/3/

Answer 2

您可以在复选框上触发单击事件，而不是手动更改属性：

$('input:checkbox').click();

Answer 3

$('input:button').click(function(){
    $('input:checkbox').trigger("change");
});

这允许在您单击按钮时触发"更改"事件

Answer 4

是的，触发复选框，我会这样做（替换小提琴中代码的第一部分）：

// This toggle checks and unckecks the box
$('input:button').on('click', function(event){
    $('input:checkbox').trigger('click');             
});

当然，假设您的目标是基本上使按钮成为您选中或取消选中该框的方式。