复选框更改事件未触发答案

【问题标题】：Checkbox change event not firing复选框更改事件未触发
【发布时间】：2011-09-12 12:04:30
【问题描述】：

这是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.chk').live('change', function() {
      alert('change event fired');
    });
    $('a').click(function() {
      $('.chk').attr('checked', true);
    });
  });
</script>
</head>
<body>
<div class="chkHolder">
  <input type="checkbox" class="chk" name="a" id="a" />
  <input type="checkbox" class="chk" name="b" id="b" />
</div>
<a href="#">check all</a>
</body>
</html>

当我单击“检查所有”超链接时，我希望为每个复选框触发更改事件。然而，这并没有发生。

有什么想法吗？

非常感谢！

【问题讨论】：

页面是否重新加载？您可能需要在 click() 处理程序中使用 return false; 或 preventDefault()

标签： javascript jquery

【解决方案1】：

使用：$('.chk').attr('checked', true).change();

现场示例：http://jsfiddle.net/NRPSA/1/

【讨论】：

有谁知道为什么我们需要明确地这样做。
@lulalala 因为没有在该元素上调用任何事件，它只是设置一个属性。 change() 触发更改事件。

【解决方案2】：

当你改变属性时也使用以下：

$('.chk').trigger('change');

或者像其他人建议的那样在您的代码中：

$('.chk').attr('checked', true).trigger('change');

【讨论】：

【解决方案3】：

尝试改变

$('a').click(function() {
      $('.chk').attr('checked', true);
});

到-

$('a').click(function() {
      $('.chk').attr('checked', true).trigger('change');
 });

这应该会强制触发“更改”事件。

工作演示 - http://jsfiddle.net/ipr101/pwmBE/

【讨论】：

记住jquery可以链接命令，不需要找.chk两次
@voigtan - 谢谢，我完全错过了。我已经相应地更新了答案。

【解决方案4】：

试试这个。

<div id ="chkall"> <a href="#">check all</a> <div>

            $('#chkall a').live("change", function() {
            $('.chk').attr('checked', true);
            });

【讨论】：