jQuery检查复选框并触发javascript onclick事件 [英] jQuery checking a checkbox and triggering javascript onclick event

问题描述

我正在尝试使用jQuery检查复选框并在此过程中触发onclick事件。

说我在html中定义了一个复选框：

 < input type =checkboxvalue =checkedname =check1onclick =alert（this.value）;> ; 
  

我有一个在函数中触发的jQuery语句：

  $（'input [name = check1]'）。attr（'checked'，true）; 
  

结果是复选框被检查但是没有触发javascript onclick事件（因此没有警报）。但是，如果我按原样手动触发点击：

  $（'input [name = check1]'）。attr （'checked'，true）.trigger（'click'）; 
  

结果是复选框被选中，触发了javascript onclick事件（正确获取了值）但是之后复选框就会被取消选中。

有谁能告诉我如何实现我想做的事情？

.triggerHandler（）而不是 .trigger（）：

  $（'input [name = check1]'）。attr（'checked'，true）.triggerHandler（ '点击'）; 
  

此外，请改用 .prop（） of .attr（）：

  $（'input [name = check1]'）。prop（'checked'，true）.triggerHandler（'click'）; 
  

（如果您使用的是jQuery 1.6或更新版本。）编辑&mdash ;另外，正如我对另一个答案所评论的那样，当编程触发事件时，你必须注意jQuery的奇怪行为。 这是一个说明性的jsfiddle。当一个元素发生真正的点击时，元素的点击处理程序将会看到已检查标志的更新值。也就是说，如果单击未选中的复选框，则单击处理程序将看到已检查标志设置为 true 。但是，如果您通过jQuery在未选中的复选框上触发单击，则单击处理程序将看到已检查标志设置为 false ！在我看来，这是一个非常糟糕的事情，但总是这样做。

再次编辑—哦，还有，我忘记了另一个重要的（和令人恼火的）jQuery怪异：由于原因未知， .triggerHandler（） API只会调用第一个匹配的元素上的处理程序。如果您尝试触发所有复选框单击处理程序，换句话说：

  $（'input：checkbox'）。 triggerHandler（ '点击'）; 
  

然后只会触发页面上的第一个复选框。为了处理精神错乱，我通常做的是将处理程序与我自己的假事件名称绑定以及点击：

  $（'input：checkbox'）。bind（'click my-click'，function（）...）//或.on（）with 1.7 
  

这样我可以触发我的点击并充分利用两个世界：库触发 all 上的处理程序匹配的元素，但它不会切换元素的实际状态。

I'm trying to check a checkbox using jQuery and trigger the onclick event in the process.

Say I have a checkbox defined in html:

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

And I have a jQuery statement that is triggered in a function:

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

The result is the checkbox gets checked but the javascript onclick event is not triggered (hence no alert). But if I were to trigger the click even manually as such:

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

The result is the checkbox gets checked, javascript onclick event is triggered (and the value is correctly gotten) but then the checkbox gets unchecked after that.

Can anyone tell me how I can achieve what I'm trying to do?

解决方案

Use .triggerHandler() instead of .trigger():

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

Also, use .prop() instead of .attr():

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

(if you're using jQuery 1.6 or newer.) edit — Also, as I commented on another answer, you have to watch out for jQuery's weird behavior when programmatically triggering events. Here is an illustrative jsfiddle. When a real "click" happens on an element, the "click" handler for the element will see the updated value of the "checked" flag. That is, if you click on an unchecked checkbox, the click handler will see the "checked" flag set to true. However, if you trigger "click" on an unchecked checkbox via jQuery, the "click" handler will see the "checked" flag set to false! That's a really bad thing, in my opinion, but it's always done that.

edit again — oh, also, I forgot another important (and irritating) jQuery weirdness: for reasons unknown, the .triggerHandler() API will only invoke handlers on the first matched element. If you try to trigger all the checkbox "click" handlers, in other words:

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

then only the first checkbox on the page will be triggered. What I generally do in order to deal with the insanity is bind the handler with my own fake event name as well as "click":

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

That way I can trigger "my-click" and get the best of both worlds: the library triggers the handler on all the matched elements, but it won't toggle the actual state of the elements.

这篇关于jQuery检查复选框并触发javascript onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！