Нужна помощь по работе с флажками jquery - PullRequest
Новая
       28

Нужна помощь по работе с флажками jquery

2 голосов
/ 28 ноября 2010

Я не знаю, как сделать кодирование в JQuery для флажка 

<p class="list">
  <label for="chkSunday"><input type="checkbox" checked   name="chkday" id="chkday0" value="0" />All days</label>
  <label for="chkSunday"><input type="checkbox"  name="chkday" id="chkday1" value="1"  />Sunday</label>
  <label for="chkMonday"><input type="checkbox"  name="chkday" id="chkday2" value="2" />Monday</label>
  <label for="chkTuesday"><input type="checkbox"  name="chkday" id="chkday3" value="3" />Tuesday</label>
  <label for="chkWednesday"><input type="checkbox"  name="chkday" id="chkday4" value="4"  />Wednesday</label>
  <label for="chkThursday"><input type="checkbox"  name="chkday" id="chkday5" value="5" />Thursday</label>
  <label for="chkFriday"><input type="checkbox"  name="chkday" id="chkday6" value="6" />Friday</label>
  <label for="chkSaturday"><input type="checkbox"  name="chkday" id="chkday7" value="7"  />Saturday</label>
</p>

В вышеупомянутых флажках у меня есть несколько вариантов использования:

  • Usecase 1
    • Пользователь выбрал любой день, после чего флажок «все» должен быть снят
  • Вариант использования 2
    • Пользователь снимает флажок все дни, после чего флажок «все» должен быть установлен

Я не знаю, как с этим справиться в jQuery.

Ответы [ 2 ]

2 голосов
/ 28 ноября 2010

Я думаю, это то, что вам нужно: 

$(".list :checkbox").change(function() {
  if(this.id == "chkday0") $(".list :checkbox:gt(0)").attr("checked", false);
  $("#chkday0").attr("checked", $(".list :checkbox:gt(0):checked").length == 0);
});

Вы можете проверить это здесь .Для этого нужно установить обработчик change для каждого флажка в этом <p>.

  • Если это первый (все), очистить все остальные дни.
  • Независимо от того, какой это был, проверьте первый, если ни один другой не выбран (отметьте Все, если нет дней).

Также обратите внимание, что в демоверсии изменились <label> элементы ... они были недействительными for атрибутов, и поскольку они обертывают <input>, с которым они идут, вы все равно можете просто удалить for.

1 голос
/ 28 ноября 2010

Это очень похоже на @ ответ Ника , но избегает выбора DOM Предполагается статическая группа элементов.

Пример: http://jsfiddle.net/patrick_dw/7UwLU/

var $allBoxes = $('p.list input:checkbox').change(function() {
    var $dayBoxes = $allBoxes.slice(1);
    if ($allBoxes[0].checked) $dayBoxes.not(this).attr('checked', '');
    $allBoxes[0].checked = !$dayBoxes.filter(':checked').length;
});

Нет необходимости менять принятый ответ. Просто показываю другой путь.

...