javascript - 需要使用 jquery 为两组不同的复选框设置单独的单击事件。

Question

我有两组复选框。一个用于类别，一个用于产品。

对于类别我有这个

<div id="category">
    <input type="checkbox" id="cateogry1">
    <input type="checkbox" id="cateogry2">
    <input type="checkbox" id="cateogry3">
</div>

对于产品我有这个

<div id="product">
    <input type="checkbox" id="product1">
    <input type="checkbox" id="product2">
    <input type="checkbox" id="product3">
</div>

我最初所做的是遍历每个复选框并为所有这样的人注册一个点击事件

$("input:checkbox").each(function(){
     var localCheckboxId = '#'+$(this).attr('id');
     $(localCheckboxId).click(function() { 
     //did something
     });
});

现在我想分离类别和产品的点击事件。

如何使用 jquery 做到这一点？

Answer 1

使用包含divID：

产品：

$("#product input:checkbox").click(...

类别

$("#category input:checkbox").click(...

Answer 2

您可以像这样使用 JQuery 选择器：

$("#category input").click(categoryFunction);

像这样：

$("#product input").click(productFunction);

发生的事情是 select first 将选择限制为基于 each 的 ID div。所以这input部分的意思是“只输入属于父ID的后代”

因为您只有复选框输入元素，所以无需指定类型。但是，如果您确实使用了更多输入类型，那么您可以添加额外的:checkbox部分以进一步限制选择器：

$("#category input:checkbox").click(categoryFunction);

这是一个工作示例，它甚至显示了如何获取id被单击的复选框。

Answer 3

您可以保留循环，但在inputparent 上添加测试：

if($(this).parent().attr('id') === "category") { ... }
else { ... }