Нужно иметь отдельное событие click для двух разных наборов флажков с помощью 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 
    }); 
}); 

Теперь я хочу отделить события click для обеих категорий и продуктов.

Как это сделать с помощью jquery?

Answer 1

Вы можете использовать селектор JQuery, как это:

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

и так:

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

Что происходит, что выбор первых ограничивает выбор будет основан на ID каждого div. Таким образом, часть input означает «только входные потомки, принадлежащие родительскому идентификатору»

Поскольку у вас есть только элементы ввода флажка, нет необходимости указывать тип. Однако, если вы на самом деле использовать больше типов ввода, то вы можете добавить дополнительную :checkbox части для дальнейшего ограничения выбора:

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

Here is a working example, он даже показывает, как получить id для флажка, который щелкнул.

Answer 2

Используйте содержащий div ID:

продукты:

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

Категории

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

Answer 3

Вы можете оставить свой цикл, но добавить тест на input родителя:

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