Как установить checked у radio кнопки?

Question

[Heinemann]

Почему проверка is(':checked') всегда возвращает true? И как в таком случае установить у нужной кнопки checked?

<input type="radio" class="delivery-radio" name="delivery" checked='checked' value="pickup">
                <p class="label-for-radio">Самовывоз</p>
                <input type="radio" class="delivery-radio" name="delivery" value="courier_delivery">
                <p class="label-for-radio">Курьерская доставка</p>

$('input[name="delivery"]').click(function (){
        if ($(this).is(':checked') === false ) {
            $('input[name="delivery"]').removeAttr('checked')
            $(this).prop('checked', 'checked');
        }
    })

Comments

[alexalexes]

Нужно всегда обращать внимание на контекст this в функциях-обработчиках и проверять его точками останова в отладчике. Если он действительно является нодой (не семейством нод), то у него должно быть свойство checked.
В этом случае можно обратиться без обертки jquery:

if (this.checked === false )
{
}

[Heinemann]

alexalexes, С вашим вариантом тоже всегда выводит true

[alexalexes]

А зачем вам checked менять?
Эти инпуты связаны одним name-мом, браузер сам это определяет и переставляет флаг без помощи JS.

[Heinemann]

alexalexes, У меня есть два окна: самовывоз и курьерская доставка. Хочу выводить то или иное окно в зависимости от выбранного инпута. А "checked" хочу использовать как ориентир, по которому буду понимать какое окно показывать.

[Heinemann]

alexalexes, Получается, что браузер сам устанавливает "checked" но в коде страницы изменения не отображаются?

[Heinemann]

Решил проблему убрав проверку на false

[alexalexes]

Сначала браузер выставляет флаг (удаляет с предыдущего элемента и ставит на текущем), потом идет выполнение обработчика клика на элемент. Поскольку элемент выделен, то в любом случае в обработчике всегда будет checked == true.
Это браузер сам делает до вызова обработчика, делать это уже не нужно:

$('input[name="delivery"]').removeAttr('checked')
$(this).prop('checked', 'checked');

Нужно определить, какой пункт кликнули и по значению value уже делать действия, чтобы изменить состояния окон или что у вас там:

if (this.value === "pickup")
{
  // делать что-то в случае клика на первый пункт
}
else if (this.value === "courier_delivery")
{
   // делать что-то в случае клика на второй пункт
}

[Heinemann]

alexalexes, Я догадывался до этого, но браузер это делает как-то слишком неочевидно, ибо в коде страницы ничего не меняется при клике по инпутам. В общем, спасибо за помощь и разъяснения.

Answer 1

[Nik Faraday]

<input type="radio" class="delivery-radio" name="delivery" checked='checked' value="pickup">

Потому что у вас по стандарту стоит что инпут checked.

if ($(this).is(':checked') === false ) {
            $('input[name="delivery"]').removeAttr('checked')
            $(this).prop('checked', 'checked');
        }

Вот этот кусок кода проверяет, если кнопка НЕ чекнуто, ТОГДА мы делаем её НЕ чекнутой ЕЩЁ РАЗ...

Comments

[Heinemann]

Nik Faraday по стандарту стоит "checked" у одной из кнопок. Насколько я понимаю, событие "click " и "this" внутри этого события указывают только на ту кнопку, по которой был произведен клик. Поэтому меня удивило, что проверка "is('''checked')" всегда выдает ''true'.

А что касается проверки на false, то мы у ВСЕХ кнопок удаляем атрибут 'çhecked ' и добавляем его только той, по которой был произведен клик

[Nik Faraday]

Каждое событие привязано к конкретной кнопке, а внутри этого события this указывает НА ОКНО (Тип window). Добавлять аттрибут checked через JS после клика не самая лучшая идея, так как этот аттрибут сам "Появляется" при клике или убирается при клике на другой батон

[Nik Faraday]

Так же value на radioButton не отображается и оно там не нужно, только если у вас специфическая бизнес-логика

[Heinemann]

Nik Faraday, Я через value на сервере определяю тип доставки. Что в этом плохого?

[Heinemann]

Nik Faraday, Может, checked и "появляется" сам, но явно в коде страницы изменения не отображаются, там checked будет висеть все так же по дефолту. А про this почитаю, спасибо