jQuery活的，支撑的，改变的

Question

当几个复选框中的任何一个的“选中”状态被更改时，我需要触发一个事件，而不是通过监听单击来实现这一点。为什么？

看起来是这样的：

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

当单击所有口味时，所有其他复选框都将被设置为选中：

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

上面的功能显然有效--所有的复选框都会被选中。然而，如果我听到这样的状态变化：

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

只有当我物理地单击复选框时，DispenseFlavor()方法才会被调用，而不是当复选框的选中状态通过将选中的属性设置为checkAllFlavors()函数时更改时调用。

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

Answer 1

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

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

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

Answer 2

我从jQuery论坛那里找到了这个答案

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

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

Answer 3

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