Невозможно программно «проверить» радиокнопку с помощью jQuery

Question

У меня есть набор переключателей, и я хотел бы сделать как кнопку, так и прикрепленный текст кликабельными (чтобы улучшить удобство использования).

Это должно быть очень просто, но по какой-то причине состояние переключателя не будет обновляться при запуске из jQuery. Случается, что в DOM появится атрибут checked, но переключатель, по-видимому, не отображается (визуально).

Примечание: он отлично работает, когда я запускаю код с консоли, но когда он запускается обычно по моей функции, он не обновляется. Кроме того, этот код отлично работает для , не проверяя других переключателей в группе ... поэтому я смущен, почему он не работает в другом направлении.

Вот моя разметка:

<div class="radio-input"> 
    <input type="radio" name="ad_category" id="cat_standard"> 
    <span class="inline-label">Standard</span> 
</div> 
<div class="radio-input"> 
    <input type="radio" name="ad_category" id="cat_reward"> 
    <span class="inline-label">Reward</span> 
</div> 

и JQuery:

$(".radio-input").click(function() { 

    if (!$(this).children("input:radio").attr("checked")) { 

    $(this).siblings(".radio-input").children("input:radio").removeAttr("checked"); 

    $(this).children("input:radio").attr("checked","checked"); 

    } 
}); 

Для записи вызова click() на элементе приводит к тому же не-результат, даже если он отлично работает при запуске из консоль. Кроме того, оба .prop и .attr дают тот же результат (работает в консоли, не работает в обычном потоке).

Answer 1

Что случилось с:

<label><input type="radio" name="ad_category"> Standard</label> 

Вот что <label> тег для, в конце концов ...

Во всяком случае, чтобы ответить на актуальный вопрос, есть разница между checkedатрибутом и checkedНедвижимость. Примером этой разницы может быть текстовое поле: input.value - текущее значение, а значение input.getAttribute("value") - значение по умолчанию.

Answer 2

Чтобы прикрепить щелкните метку на радио, вы можете сделать это двумя способами:

1. stick the radio inside the label tags 

или

2. use a for="" attribute in the label, in which the value is equal to the ID of the radio 


    <label for="x">something</label> 
    <input id="x" type="text" value="my field" /> 

После этого проверьте, если поле имеет атрибут checked="checked"

Answer 3

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

$('.radio-input').click(function() { 
    $(this).children('input:radio').attr('checked', 'checked'); 
}); 

Обратите внимание, что это не срабатывает событие изменения, только устанавливает конкретную радиостанцию ​​проверил, и как уже упоминалось, браузер снимите выбранную радиостанцию.