jQuery: отключить все флажки, кроме текущего

Question

У меня есть флажки, которые должны действовать аналогично кнопкам управления. По сути, когда один проверяется, все остальные должны быть сняты. Как я могу достичь этого с минимальной болью?

Итак, подведем итог. Если флажок установлен, все остальные (братья и сестры) должны быть сняты, оставляя одно проверенное состояние без изменений.

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

Answer 1

С помощью радиокнопок. Серьезно, радиокнопки существуют по причине. Люди ожидают, что переключатели будут выбором «1 из n», а флажки - выбором «от 0 до n».

В любом случае, вот код:

$('input:checkbox').click(function() {
    $(this).siblings('input:checkbox').removeAttr('checked');
});

Демо: http://jsfiddle.net/ThiefMaster/AVEjt/

Но, пожалуйста, используйте его только в том случае, если вам действительно нужно разрешить пользователю снимать все галочки. Тогда это приемлемо - в противном случае переключатели намного лучше.

Answer 2

Попробуйте:

$(':checkbox').not( selector_for_current ).attr('checked', false);

Где selector_for_current - «текущий», часто this, если вы находитесь в обратном вызове.

Answer 3

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

$("#myform").click(function(e) {
    if ($(e.target).is("input:checkbox")) {
        $("input:checkbox", this).not(e.target).removeAttr("checked");
    }
})

Демо: http://jsfiddle.net/Gs3wa/

Answer 4

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

$(function() {
    $("input[type=checkbox]").click(function(){
        $(this).siblings("input[type=checkbox]:not(this)").attr("checked", "");
    });
});

См. пример .