使用 jQuery 检测未选中的复选框答案

【问题标题】：Detect checkbox checked unchecked with jQuery使用 jQuery 检测未选中的复选框
【发布时间】：2014-04-17 16:09:19
【问题描述】：

我正在尝试检测 jQuery 中复选框何时被选中或取消选中。我正在从 JSON 内容动态创建复选框。这就是它们的创建方式：

$.each(data.modifierOptions, function(key, item) {
                            var checkBox = "<input type='checkbox' class='modifier' data-name='" + item.Name + "' + data-price='" + item.Price + "' name='" + item.Name + "' value='" + item.ID + "'/>" + item.Name + "<br/>";
                            $(checkBox).appendTo('#modifiersDiv');
                        });

现在，查看身体的来源，我得到了这个：

最后，我尝试使用这个 jQuery 事件获取选中/未选中事件，但什么也没发生：

$('input:checkbox.modifier').change(function () {
            var sThisVal = (this.checked ? $(this).val() : "");
        });

我该如何解决这个问题？

更新

我想通过复选框类获取事件。

【问题讨论】：

使用mousedown() 事件监听器而不是change()。
这个问题每周被问一百次，至少……

标签： javascript jquery html jquery-ui checkbox

【解决方案1】：

事件处理程序仅绑定到当前选定的元素；他们在您的代码调用 .click() 时必须存在于页面上

当您动态添加内容时，您应该使用，

$(document).on('change', 'input:checkbox.modifier',  function () {
     var sThisVal = (this.checked ? $(this).val() : "");
});

阅读有关委派活动的信息。

【讨论】：

谢谢，这对我有帮助

【解决方案2】：

当您动态创建复选框时，您必须像这样设置事件处理程序：

$(document).on("change", "input[type='checkbox'].modifier", function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

【讨论】：

感谢您的编辑..在"" 中编写 jquery 选择器的习惯@ 总有一天会吊死我..

【解决方案3】：

尝试使用 on 事件编写代码

 $(document).on('change', 'input:checkbox.modifier',  function () {
        var sThisVal = $(this).is(':checked') == true ? $(this).val() : "";
    });

【讨论】：