Невозможно программно «проверить» переключатель с помощью jQuery - PullRequest
Новая
       8

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

1 голос
/ 16 марта 2012

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

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

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

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

<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 дают одинаковый результат (работает в консоли, не работает в обычном потоке).

Ответы [ 3 ]

7 голосов
/ 16 марта 2012

Что не так с: 

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

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

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

1 голос
/ 16 марта 2012

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

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"

0 голосов
/ 16 марта 2012

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

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

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

...