jQuery檢查複選框並觸發javascript onclick事件

Question

我正在嘗試使用jQuery檢查複選框，並觸發過程中的onclick事件。

說我有在HTML中定義一個複選框：

<input type="checkbox" value="checked" name="check1" onclick="alert(this.value);"> 

而且我有一個在功能觸發一個jQuery聲明：

$('input[name=check1]').attr('checked', true); 

結果複選框被選中，但JavaScript的onclick事件沒有被觸發（因此沒有提醒）。但是，如果我連手動觸發點擊這樣：

$('input[name=check1]').attr('checked', true).trigger('click'); 

結果是被選中的複選框，將觸發JavaScript的onclick事件（和值正確地得到），但隨後的複選框被後選中。

任何人都可以告訴我我可以如何實現我想要做的？

Answer 1

使用.triggerHandler()而不是.trigger()：

$('input[name=check1]').attr('checked', true).triggerHandler('click'); 

此外，使用.prop()代替.attr()：（如果你使用jQuery 1.6或更高版本）

$('input[name=check1]').prop('checked', true).triggerHandler('click'); 

編輯 —另外，正如我對另一個答案所評論的那樣，當以編程方式觸發事件時，您必須小心jQuery的怪異行爲。 Here is an illustrative jsfiddle.當元素髮生真正的「點擊」時，元素的「click」處理程序將會看到「checked」標誌的更新值。也就是說，如果您點擊未選中的複選框，則點擊處理程序將看到「已檢查」標誌設置爲true。但是，如果您通過jQuery在未選中的複選框上觸發「click」，則「click」處理程序會將「checked」標誌設置爲false！在我看來，這是一件非常糟糕的事情，但總是這樣做。

編輯再次 —哦，還有，我忘了另一個重要的（和刺激性）jQuery的怪事：原因不明，.triggerHandler() API將只調用第一個匹配元素的處理程序。如果試圖觸發所有的複選框「單擊」換句話說處理器，：

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

那麼只有頁面上的第一個複選框將被觸發。我通常做的，以應對瘋狂是處理程序綁定自己的假事件的名稱，以及「點擊」：

$('input:checkbox').bind('click my-click', function() ...) // or ".on()" with 1.7 

這樣我可以觸發「我點擊」，並獲得最佳的這兩個世界：庫觸發處理器所有匹配的元素，但它不會切換元素的實際狀態。

Answer 2

變化：

$('input[name=check1]').attr('checked', true).trigger('click'); 

要：

$('input[name=check1]').trigger('click').prop('checked', true); 

Answer 3

this answer似乎很好地工作：

$('input[name=check1]').attr('checked', true).change();

jsFiddle demo

Answer 4

.on('changed', ...)絕對是你應該綁定到複選框元素（它的行爲更合理。然後你可以手動觸發一個.click()關於你想要切換狀態的元素來查看正確的事件觸發事件（並看到這些處理程序也看到了處於匹配狀態的DOM）。

<input type="checkbox" value="checked" name="check1"> 
<script> 
    $('input').on('change', function(e) {alert(e.target.value);}); 
    $('input').click(); 
    // see the alert, and if you checked $(e.target).is(':checked') you should get true 
</script>