blocks|key|3049284|text|$('#myCheckbox').change(function+()+{
++++if+($(this).prop("checked"))+{
++++++++//+checked
++++++++return;
++++}
++++//+not+checked
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3049285|注意:在旧版本的jquery中，使用attr是可以的。读取状态的Now+it's+suggested+to+use+prop。|unstyled|offset|length|style|CODE|3049286|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5874652/prop-vs-attr^0|0|I|4|1M|4|W|U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@$G|U|H|V|I|J]|$G|W|H|X|I|J]]|9|@$G|Y|H|Z|1|10]]|A|$]]|$1|K|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>$('#myCheckbox').change(function () {
 if ($(this).prop("checked")) {
 // checked
 return;
 }
 // not checked
});
</code></pre>

Note: In older versions of jquery it was OK to use <code>attr</code>. <a href="https://stackoverflow.com/questions/5874652/prop-vs-attr">Now it's suggested to use <code>prop</code></a> to read the state.

blocks|key|313308|text|在jQuery+1.3.2和1.4.2中有一种解决方法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|313309|$("#myCheckbox").change(+function()+{
++++alert($(this).is(":checked"));
});

//Trigger+by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​|code-block|syntax|javascript|313310|但我同意，与原生事件相比，这种行为似乎有缺陷。|313311|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/HCUNn/1/|1|http://jsfiddle.net/HCUNn/2/^0|8|5|0|E|5|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

There is a work-around that works in jQuery <a href="http://jsfiddle.net/HCUNn/1/" rel="noreferrer">1.3.2</a> and <a href="http://jsfiddle.net/HCUNn/2/" rel="noreferrer">1.4.2</a>:

<pre><code>$("#myCheckbox").change( function() {
 alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​
</code></pre>

But I agree, this behavior seems buggy compared to the native event.

blocks|key|3263236|text|截至2016年6月(使用jquery+2.1.4)，其他建议的解决方案都不起作用。检查attr('checked')总是返回undefined，检查is('checked)总是返回false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3263237|只需使用prop方法：|3263238|$("#checkbox").change(function(e)+{

++if+($(this).prop('checked')){
++++console.log('checked');
++}
});|code-block|syntax|javascript|3263239|entityMap^0|17|F|1Q|9|22|C|2I|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

As of June 2016 (using jquery 2.1.4) none of the other suggested solutions work. Checking <code>attr('checked')</code> always returns <code>undefined</code> and <code>is('checked)</code> always returns <code>false</code>. 

Just use the prop method:

<pre><code>$("#checkbox").change(function(e) {

 if ($(this).prop('checked')){
 console.log('checked');
 }
});
</code></pre>

blocks|key|308174|text|我仍然在使用jQuery+1.7.2时遇到这种情况。一个简单的解决方法是使用setTimeout延迟执行单击处理程序，并让浏览器在此期间发挥其魔力：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|308175|$("#myCheckbox").click(+function()+{
++++var+that+=+this;
++++setTimeout(function(){
++++++++alert($(that).is(":checked"));
++++});
});|code-block|syntax|javascript|308176|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I'm still experiencing this behavior with jQuery 1.7.2. A simple workaround is to defer the execution of the click handler with setTimeout and let the browser do its magic in the meantime:

<pre><code>$("#myCheckbox").click( function() {
 var that = this;
 setTimeout(function(){
 alert($(that).is(":checked"));
 });
});
</code></pre>

blocks|key|308160|text|如果您预料到了这种非常不受欢迎的行为，那么绕过它的一个方法是从jQuery.trigger()向checkbox的单击处理程序传递一个额外的参数。这个额外的参数用于通知单击处理程序，单击已以编程方式触发，而不是用户直接单击复选框本身。然后，checkbox的单击处理程序可以反转报告的检查状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|308161|下面是我如何在ID为"myCheckBox“的复选框上触发单击事件。请注意，我还传递了一个带有单个成员nonUI的对象参数，该参数被设置为true：|308162|$("#myCheckbox").trigger('click',+{nonUI+:+true})|code-block|syntax|javascript|308163|下面是我如何在checkbox的click事件处理程序中处理它。处理函数检查是否存在作为其第二个参数的nonUI对象。(第一个参数始终是事件本身。)如果该参数存在并且设置为true，那么我会反转报告的.checked状态。如果没有传入这样的参数-如果用户只需单击UI中的复选框，就不会有这样的参数-那么我将报告实际的.checked状态：|308164|$("#myCheckbox").click(function(e,+parameters)+{
+++var+nonUI+=+false;
++++++++try+{
++++++++++++nonUI+=+parameters.nonUI;
++++++++}+catch+(e)+{}
++++++++var+checked+=+nonUI+?+!this.checked+:+this.checked;
++++++++alert('Checked+=+'+%2B+checked);
++++});|308165|http://jsfiddle.net/BrownieBoy/h5mDZ/上的JSFiddle版本|offset|length|308166|我测试过Chrome，Firefox和IE8。|308167|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/BrownieBoy/h5mDZ/^0|0|0|0|0|0|0|11|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

If you anticipate this rather unwanted behaviour, then one away around it would be to pass an extra parameter from the jQuery.trigger() to the checkbox's click handler. This extra parameter is to notify the click handler that click has been triggered programmatically, rather than by the user directly clicking on the checkbox itself. The checkbox's click handler can then invert the reported check status.

So here's how I'd trigger the click event on a checkbox with the ID "myCheckBox". Note that I'm also passing an object parameter with an single member, nonUI, which is set to true:

<pre><code>$("#myCheckbox").trigger('click', {nonUI : true})
</code></pre>

And here's how I handle that in the checkbox's click event handler. The handler function checks for the presence of the nonUI object as its second parameter. (The first parameter is always the event itself.) If the parameter is present and set to true then I invert the reported .checked status. If no such parameter is passed in - which there won't be if the user simply clicked on the checkbox in the UI - then I report the actual .checked status:

<pre><code>$("#myCheckbox").click(function(e, parameters) {
 var nonUI = false;
 try {
 nonUI = parameters.nonUI;
 } catch (e) {}
 var checked = nonUI ? !this.checked : this.checked;
 alert('Checked = ' + checked);
 });
</code></pre>

JSFiddle version at <a href="http://jsfiddle.net/BrownieBoy/h5mDZ/" rel="nofollow">http://jsfiddle.net/BrownieBoy/h5mDZ/</a>

I've tested with Chrome, Firefox and IE 8.

blocks|key|3263226|text|<input+id="widget-wpb_widget-3-custom_date"+class="mycheck"+type="checkbox"+value="d/M/y"+name="widget-wpb_widget[3][custom_date]"+unchecked="true">++++

var+atrib+=+$('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if+($(this).is(":checked"))+
{
$('.mycheck').attr("unchecked",false);
+++alert("checkbox+checked");
}
else
{
$('.mycheck').attr("unchecked",true);
+alert("checkbox+unchecked");
}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3263227|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true"&gt; 

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
 alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});
</code></pre>

blocks|key|3263241|text|++$("#checkbox").change(function(e)+{

++if+($(this).prop('checked')){
++++console.log('checked');
++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3263242|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> $("#checkbox").change(function(e) {

 if ($(this).prop('checked')){
 console.log('checked');
 }
});
</code></pre>

blocks|key|310329|text|$("#personal").click(function()+{
++++++if+($(this).is(":checked"))+{
++++++++++++alert('Personal');
++++++++/*+var+validator+=+$("#register_france").validate();+
++++++++validator.resetForm();+*/
++++++}
++++++++++++}
++++++++++++);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|310330|JSFIDDLE|unstyled|offset|length|310331|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ssuryar/b4ohrw1d/9/^0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$("#personal").click(function() {
 if ($(this).is(":checked")) {
 alert('Personal');
 /* var validator = $("#register_france").validate(); 
 validator.resetForm(); */
 }
 }
 );
</code></pre>

<a href="http://jsfiddle.net/ssuryar/b4ohrw1d/9/" rel="nofollow noreferrer">JSFIDDLE</a>

blocks|key|308068|text|好吧，为了与第一个场景相匹配，这是我想出来的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|308069|http://jsbin.com/uwupa/edit|offset|length|308070|本质上，不是绑定"click“事件，而是绑定"change”事件和警报。|308071|然后，当您触发事件时，首先触发单击，然后触发更改。|308072|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

Well, to match the first scenario, this is something I've come up with.

<a href="http://jsbin.com/uwupa/edit" rel="nofollow noreferrer">http://jsbin.com/uwupa/edit</a>

Essentially, instead of binding the "click" event, you bind the "change" event with the alert.

Then, when you trigger the event, first you trigger click, then trigger change.

blocks|key|308187|text|$(+"#checkbox"+).change(function()+{
++++if($(this).is(":checked")){
++++++++alert('hi');
++++}

});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|308188|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$( "#checkbox" ).change(function() {
 if($(this).is(":checked")){
 alert('hi');
 }

});
</code></pre>

blocks|key|3263213|text|最快最简单的方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3263214|$('#myCheckbox').change(function(){
++++alert(this.checked);
});|code-block|syntax|javascript|3263215|3263216|$el[0].checked;|3263217|$el+-是选择的jquery元素。|3263218|享受吧！|3263219|entityMap^0|0|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|D|@]|E|$]]|$1|L|3|M|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|N|3|O|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

Most fastest and easy way:

<pre><code>$('#myCheckbox').change(function(){
 alert(this.checked);
});
</code></pre>

<hr>

<pre><code>$el[0].checked;
</code></pre>

$el - is jquery element of selection.

Enjoy!

blocks|key|310293|text|if+($.browser.msie)+{
++++$("#myCheckbox").click(function()+{+$(this).trigger('change');+});
}

$("#myCheckbox").change(function()+{
++++++++alert($(this).is(":checked"));
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|310294|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if ($.browser.msie) {
 $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
 alert($(this).is(":checked"));
 });
</code></pre>

When I bind a function to a checkbox element like:

<pre><code>$("#myCheckbox").click( function() {
 alert($(this).is(":checked"));
});
</code></pre>

The checkbox changes its checked attribute before the event is triggered, this is the normal behavior, and gives an inverse result.

However, when I do:

<pre><code>$("#myCheckbox").click();
</code></pre>

The checkbox changes it checked attribute after the event is triggered.

My question is, is there a way to trigger the click event from jQuery like a normal click would do (first scenario)?

PS: I've already tried with <code>trigger('click')</code>;

jQuery, checkboxes and .is(":checked")

当我将一个函数绑定到一个复选框元素时，比如：$("#myCheckbox").click( function() {    alert($(this).is(":checked"));});checkbox在触发事件之前更改其选中的属性，这是正常行为，并提供相反的结果。然而，当我这样做的时候：$("#myCheckbox").click();在触发事件后，该复选框会将其更改为 attribute 

问选中、复选框和.is(“：jQuery”)
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中、复选框和.is(“：jQuery”)EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中、复选框和.is(“：jQuery”)
EN