jQuery live and prop and change答案

【问题标题】：jQuery live and prop and changejQuery live and prop and change
【发布时间】：2013-01-24 19:17:30
【问题描述】：

当多个复选框中的任何一个的“已选中”状态发生更改时，我需要触发一个事件，并且这样做不是通过监听点击。为什么？

看起来像这样：

    BUILD YOUR SUNDAE!
    All Flavors []     Chocolate [ ]   Vanilla [ ] Strawberry [ ]  Pistacchio [ ]

当点击 All Flavors 时，所有其他复选框都设置为选中：

function checkAllFlavors() {
   $("#flavorFilterContainer input.flavor-filter").each(function (i, elem) {
       $(elem).prop('checked', true);
   });
 }

上面的功能明显有效——所有的复选框都被选中。但是，如果我像这样监听状态变化：

      ("#flavorFilterContainer input.flavor-filter").live('change', function () {
           DispenseFlavor()
      });

DispenseFlavor() 方法仅在我物理单击复选框时被调用，而不是当复选框的选中状态通过将 checked 属性设置为 true 来更改时，如 checkAllFlavors() 函数中发生的那样。

复选框的更改状态是否仅通过 GUI 交互而不是通过使用$(elem).prop('checked', true) 设置属性来改变？

【问题讨论】：

从 jQuery 1.7 开始，.live() 方法已被弃用。使用.on() 附加事件处理程序。旧版本 jQuery 的用户应该使用.delegate() 而不是.live()。
交互事件不会在您修改属性/属性时自动触发，您必须自己触发。
@KevinB：感谢信息互动活动。
@ROY Finley：感谢提醒；已将其更改为 on()。

标签： jquery prop

【解决方案1】：

您必须在 checkAllFlavors 函数中手动触发 change 事件：

function checkAllFlavors () {
   $('#flavorFilterContainer input.flavor-filter').prop('checked', true).change();
}

顺便说一句，你应该缓存那个选择器。

【讨论】：

【解决方案2】：

我从the jQuery forums找到了这个答案：

$.propHooks.checked = {
  set: function(elem, value, name) {
    var ret = (elem[ name ] = value);
    $(elem).trigger("change");
    return ret;
  }
};

此解决方案是一个自定义处理程序，用于通过“prop”方法对“checked”进行更改。此处理程序会根据需要触发更改事件，但您无需手动指定。

【讨论】：

【解决方案3】：

查看http://jsfiddle.net/nGQKw/7/ 上的示例，希望它能解决您的问题。实际上，您必须在 checkAllFlavors() 中手动为复选框 trigger change 事件@

【讨论】：

感谢 jsFiddle 示例。这是一个挑战：如果我们说如果其他复选框之一被用户取消选中，则 ALL 复选框不能保持选中状态。