94

当我将函数绑定到复选框元素时，例如：

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

复选框在触发事件之前更改其选中属性，这是正常行为，并给出相反的结果。

但是，当我这样做时：

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

该复选框在事件触发后更改它的选中属性。

我的问题是，有没有办法像普通点击一样从 jQuery 触发点击事件（第一种情况）？

PS：我已经尝试过trigger('click')；

4

13 回答 13

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

注意：在旧版本的 jquery 中，可以使用attr. 现在建议使用prop读取状态。

于 2010-04-17T22:56:43.067 回答
27

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

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

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

但我同意，与本机事件相比，这种行为似乎有问题。

于 2010-04-17T23:06:50.193 回答
10

截至 2016 年 6 月（使用 jquery 2.1.4），其他建议的解决方案都不起作用。检查attr('checked')总是返回undefined并且is('checked)总是返回false。

只需使用 prop 方法：

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
于 2016-06-13T09:05:43.293 回答
4

我仍然在使用 jQuery 1.7.2 时遇到这种行为。一个简单的解决方法是使用 setTimeout 推迟点击处理程序的执行，同时让浏览器发挥它的魔力：

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
于 2012-09-05T10:31:31.313 回答
2

如果您预料到这种相当不受欢迎的行为，那么解决它的方法是将一个额外的参数从 jQuery.trigger() 传递给复选框的单击处理程序。这个额外的参数是通知点击处理程序点击已经被编程触发，而不是用户直接点击复选框本身。然后复选框的单击处理程序可以反转报告的检查状态。

所以这就是我如何在 ID 为“myCheckBox”的复选框上触发点击事件。请注意，我还传递了一个带有单个成员 nonUI 的对象参数，该成员设置为 true：

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

这是我在复选框的单击事件处理程序中处理它的方式。处理函数检查是否存在非 UI 对象作为其第二个参数。（第一个参数始终是事件本身。）如果参数存在并设置为 true，那么我会反转报告的 .checked 状态。如果没有传入这样的参数 - 如果用户只是单击 UI 中的复选框，则不会传入 - 然后我报告实际的 .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/

我已经用 Chrome、Firefox 和 IE 8 进行了测试。

于 2012-06-21T05:41:00.733 回答
2 
<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");
}
});
于 2015-08-21T12:50:14.813 回答
2 
$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE

于 2019-01-23T13:27:13.327 回答
1 
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
于 2017-02-28T10:52:52.167 回答
0

好吧，为了匹配第一个场景，这是我想出的。

http://jsbin.com/uwupa/edit

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

然后，当您触发事件时，首先触发单击，然后触发更改。

于 2010-04-17T23:04:29.193 回答
0

除了 Nick Craver 的回答之外，要使其正常工作，IE 8您需要在复选框中添加一个额外的点击处理程序：

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

否则回调只会在复选框失去焦点时触发，因为IE 8单击复选框和单选时会保持焦点。

虽然没有测试过IE 9。

于 2012-06-04T16:30:26.610 回答
0 
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});
于 2014-07-01T09:28:12.447 回答
-1

最快最简单的方法：

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

$el[0].checked;

$el - 是 jquery 的选择元素。

享受！

于 2014-05-20T11:02:50.783 回答
-2 
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
于 2014-01-27T08:15:34.543 回答