jQuery,checkbox和.is(“:checked”)

当我将一个函数绑定到checkbox元素,如:

$("#myCheckbox").click( function() { alert($(this).is(":checked")); }); 

在触发事件之前 ,该checkbox将更改其checked属性,这是正常行为,并给出相反的结果。

但是,当我这样做的时候:

 $("#myCheckbox").click(); 

事件触发 ,该checkbox会更改它的checked属性。

我的问题是,是否有一种方法来触发从jQuery的点击事件就像一个普通的点击会做(第一个场景)?

PS:我已经试过用trigger('click') ;

我想你应该使用“更改”处理程序:

 $('#myCheckbox').change(function () { if ($(this).attr("checked")) { // checked return; } // not checked }); 

jQuery 1.3.2和1.4.2中有一个解决方法:

 $("#myCheckbox").change( function() { alert($(this).is(":checked")); }); //Trigger by: $("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​ 

但是我同意,与本机事件相比,这种行为看起来很麻烦。

截至2016年6月(使用jQuery 2.1.4)没有其他build议的解决scheme的工作。 检查attr('checked')总是返回undefinedis('checked)总是返回false

只需使用prop方法:

 $("#checkbox").change(function(e) { if ($(this).prop('checked')){ console.log('checked'); } }); 

我仍然在使用jQuery 1.7.2遇到这种情况。 一个简单的解决方法是推迟使用setTimeout的点击处理程序的执行,并让浏览器在此期间发挥其魔力:

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

如果您预料到这种相当不想要的行为,那么绕过它将是一个额外的参数从jQuery.trigger()传递到checkbox的点击处理程序。 这个额外的参数是通知点击处理程序点击已经以编程方式触发,而不是由用户直接点击checkbox本身。 checkbox的点击处理程序可以反转报告的检查状态。

所以这里是我如何在ID为“myCheckBox”的checkbox上触发点击事件。 请注意,我也传递一个对象参数与​​单个成员nonUI,它被设置为true:

 $("#myCheckbox").trigger('click', {nonUI : true}) 

这里是我如何处理checkbox的单击事件处理程序。 处理程序函数检查是否存在nonUI对象作为其第二个参数。 (第一个参数总是事件本身。)如果参数存在并设置为true,则反转报告的.checked状态。 如果没有这样的参数传入 – 如果用户只需点击UI中的checkbox就不会有这个参数 – 那么我会报告实际的.checked状态:

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

JSFiddle版本http://jsfiddle.net/BrownieBoy/h5mDZ/

我已经testing了Chrome,Firefox和IE 8。

 <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"); } }); 
  $("#checkbox").change(function(e) { if ($(this).prop('checked')){ console.log('checked'); } }); 

那么,为了匹配第一个场景,这是我想到的。

http://jsbin.com/uwupa/edit

实质上,不是绑定“click”事件,而是将“change”事件与警报绑定。

然后,当您触发事件时,首先触发点击,然后触发更改。

除了Nick Craver的回答,为了在IE 8上正常工作,您需要在checkbox中添加一个额外的点击处理程序:

 // needed for IE 8 compatibility if ($.browser.msie) $("#myCheckbox").click(function() { $(this).trigger('change'); }); $("#myCheckbox").change( function() { alert($(this).is(":checked")); }); //Trigger by: $("#myCheckbox").trigger('click').trigger('change'); 

否则,只有当checkbox失去焦点时才会触发callback,因为IE 8在单击时将注意力集中在checkbox和收音机上。

虽然没有在IE 9testing过。

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

最快最简单的方法

 $('#myCheckbox').change(function(){ alert(this.checked); }); 

 $el[0].checked; 

$ el – 是jquery的select元素。

请享用!

 if ($.browser.msie) { $("#myCheckbox").click(function() { $(this).trigger('change'); }); } $("#myCheckbox").change(function() { alert($(this).is(":checked")); });