检测单选/复选框的变化答案

【问题标题】：Detect change of radio/checkbox检测单选/复选框的变化
【发布时间】：2012-09-22 11:06:27
【问题描述】：

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

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

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

使用插件，如果用户使用他们已经拥有的代码动态检查复选框或单选按钮，我希望能够检测到这种变化。

有什么想法吗？

HTML：

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

jQuery:

$(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!');
    });

});

【问题讨论】：

标签： jquery checkbox radio-button

【解决方案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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：