Вызов функции jQuery из разных элементов

Question

Я довольно новичок в мире jQuery, поэтому я надеюсь на помощь.

Я создаю страницу с div, в которой есть несколько флажков.

Каждый из этих флажков содержится также в своих собственных div.

<div> 
    <div> 
     <input type='checkbox' name='cb1' /> 
     <div id="info1"> 
      Hide 
     </div> 
    </div> 
    <div> 
     <input type='checkbox' name='cb2' /> 
     <div id="info2"> 
      Hide 
     </div> 
    </div> 
</div> ​ 

Мне нужно написать функцию JQuery, которая в состоянии захватить каждый раз, когда либо флажок (CB1 или CB2) щелкают, чтобы скрыть/показать, что это соответствующая «информация» DIV, (info1 или info2).

У меня будет более 100 флажков, поэтому я надеюсь, что есть способ сделать это без необходимости писать более 100 функций для click().

Спасибо,
Все

Answer 1

Попробуйте это:

$("input[type=checkbox]").change(function() { 
    var checkID = $(this).attr('name').substr(2); 
    $("#info" + checkID).slideToggle("slow"); 
}); 

Если флажок сначала снят, его информация div должна содержать display: none;.

Надеюсь, это поможет!

Answer 2

Это намного проще с классами на целевых элементов и для обхода DOM вместо использования конкретных идентификаторов:

<input class='check' type='checkbox' name='cb1' /> 
<div id="info1"> 
Hide 
</div> 



$('.check').click(function(){ 
    $(this).next().toggle() 
}) 

Answer 3

$("input[type=checkbox]").click(function(){ 
    if (this.checked) 
    $(this).next("div").show(); 
    else 
    $(this).next("div").hide(); 
}); 

Answer 4

Это ставит a .change() handler все флажки, где nameattribute starts withcb на.

При изменении происходит переход на the .next() element родной брат и calls .toggle(), который будет отображаться/скрываться в зависимости от того, был ли установлен флажок.

Пример с помощью HTML:http://jsfiddle.net/fWYtv/

$('input:checkbox[name^=cb]').change(function() { 
    $(this).next().toggle(this.checked); 
}); 

---

EDIT:

Поскольку вы заявили, что будет более чем 100 из них, это действительно было бы лучше использовать .delegate() , поэтому у вас есть только один обработчик вместо 100.

Возьмите главный <div>, который является контейнером для всех, и дать ему идентификатор, как container, так что вы в конечном итоге с:

<div id='container'> 
    <div> 
     <input type='checkbox' name='cb1' /> 
     <div ... 

Тогда call .delegate() на что, и установите input в качестве цели событие.

Как это:

Пример:http://jsfiddle.net/fWYtv/1/

$('#container').delegate('input:checkbox[name^=cb]', 'change', function() { 
    $(this).next().toggle(this.checked); 
}); 

Это будет гораздо более эффективный способ пойти.

Answer 5

Если у вас есть большое количество флажков, рассмотрите возможность использования delegate для их общего предка, поскольку это значительно быстрее, чем создание сотен обработчиков событий.