jquery: как сделать так, чтобы группа флажков запускала одно событие? - PullRequest
Новая
       7

jquery: как сделать так, чтобы группа флажков запускала одно событие?

1 голос
/ 25 декабря 2011

У меня есть группа флажков в DIV, и я использую функцию проверить все / снять все.

HTML: 

<div id="available_options" class="input">
<ul class="inputs-list">
<li>
  <label>
    <input type="checkbox" name="options" id="option_1" />
    <span>Option1</span>
  </label>
</li>
<li>
  <label>
    <input type="checkbox" name="options" id="option_2" />
    <span>Option2</span>
  </label>
</li>
</ul>
</div>
<a id="check_all_options">Check all</a> / <a id="uncheck_all_options">Uncheck all</a>

Jquery: 

 $('#check_all_options').click(function(e){
        $('#available_options input').attr('checked', 'checked').change();
});

$('#uncheck_all_options').click(function(e){
        $('#available_options input').removeAttr('checked').change();
});

$('#available_options input').live('change', function(e){
        alert('test');
});

В данный момент мое оповещение срабатывает всякий раз, когда флажок установлен / снят, что хорошо. Однако при использовании «проверить все» / «снять все» предупреждение срабатывает несколько раз (каждый флажок запускает событие). Я пробовал с StopPropagation, но я не могу заставить его делать то, что я хочу.

Есть какие-нибудь идеи, как включить его для запуска отдельного события каждый раз, когда вносятся изменения? Я хочу иметь возможность получить параметры, выбранные для запуска запроса к базе данных. Но я не хочу запускать запрос несколько раз, когда используется checkall / uncheckall.

Спасибо

Ответы [ 3 ]

2 голосов
/ 25 декабря 2011

Бесстыдная самореклама: вы можете использовать этот плагин jQuery , который я написал для этой конкретной задачи.Это выглядело бы примерно так: 

$('#check_all_options').checkAll('#available_options input[type="checkbox"]', {
    reportTo: function (numChecked) {
        console.log(numChecked);
    }
});

Если вам нужна дополнительная информация в обратном вызове reportTo помимо числа отмеченных флажков, я настоятельно рекомендую вам отправить вопрос иЯ могу работать над улучшением этого маленького проекта!

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

0 голосов
/ 25 декабря 2011

Вы можете увидеть пример на этой странице: http://briancray.com/2009/08/06/check-all-jquery-javascript/

0 голосов
/ 25 декабря 2011

Повторное комментирование как ответ:

Почему вы явно запускаете событие изменения? Это можно сделать, просто вызвав функцию запроса ajax / db из всех трех обработчиков. См., Например, jsfiddle .

...