檢測收音機/複選框的變化

Question

我正在重寫我的一個插件，我想嘗試照顧我們過去遇到的問題。

jsFiddle Demo

當您檢查通過點擊複選框，觸發更改事件。它正在控制檯中記錄。

但是，如果您使用左側的按鈕，則不會觸發「更改」。

使用插件，我希望能夠檢測到此更改，如果用戶正在使用它們已有的代碼動態檢查複選框或單選按鈕。

有什麼想法？

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

});​ 

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

當然，假設您的目標是基本上使按鈕成爲您選中或取消選中框的方式。