Question

我有多套复选框。我想要计算一组特定的复选框。这些复选框具有类sub。有趣的是，它们是从另一个php页面的ajax调用获取的。所以柜台不起作用。

<script>
$("[id^=sub][type=checkbox]").change(function () {
    $('#count').text($("[id^=sub][type=checkbox]").length);
});
</script>

当我使用下面的脚本来获取html页面本身的复选框时，它会计算第一组复选框！这些是单击以获取sub复选框的复选框！

现在，我如何计算由ajax调用获取的sub类的特定复选框？

<script>
$("input:checkbox").change(function () {
    $('#count').text($("input:checkbox:checked").length);
});
</script>

这是获取的复选框的结构：

<input type="checkbox" class="sub" name="sub['.$subjects_id.']" id="sub" value="">

我在html页面中显示计数如下：

<p id="count"></p>

Answer 1

将更改事件处理程序绑定到子复选框时，它们不存在，因此jQuery对象不表示任何元素。也就是说，$("[id^=sub][type=checkbox]")在调用它时与任何元素都不匹配。

您有两个选择，在通过ajax调用创建复选框后绑定事件处理程序，或使用事件委派。使用事件委派，您可以将处理程序绑定到祖先元素，但指定仅在匹配选择器的元素更改时才调用它。您可以查看jQuery .on()函数文档以获取有关事件委派的更多信息。

它可以像以下一样简单：

$(document).on('change', '[id^=sub][type=checkbox]', function () {
    $('#count').text($('[id^=sub][type=checkbox]:checked').length);
});

但是为了提高效率，你应该尝试使用比document元素更近的祖先。越接近越好，但它必须是所有子复选框的祖先，并且在执行此代码时它必须存在。

根据您为子复选框显示的html，您还可以使用以下选择器：

$(document).on('change', ':checkbox.sub', function () {
    $('#count').text($(':checkbox.sub:checked').length);
});