Вызов функции 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 'info' (info1 или info2).

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

Спасибо
Mark

Answer 1

Это помещает обработчик a .change() на все флажки, где атрибут name начинается с cb.

Когда происходит изменение, оно переходит к элемент .next() sibling и вызывает .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 ...

Затем позвоните .delegate() и установите input в качестве цели события.

Как это:

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

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

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

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]").change(function() {
    var checkID = $(this).attr('name').substr(2);
    $("#info" + checkID).slideToggle("slow");
});

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

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

Answer 4

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

Answer 5

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