JQuery второй переключатель не работает

Question

JQuery второй переключатель не работает

0

У меня возникла проблема с обновлением второго значения переключателя на странице JQuery.

Вот мой HTML:

<div id="system-modes-fpa" class="ui-buttonset">
    <input type="radio" id="system-fpa-mode-TIMELAPSE" name="radio" value="TIMELAPSE" class="ui-helper-hidden-accessible">
    <label for="system-fpa-mode-TIMELAPSE" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Timelapse</span>
    </label>
    <input type="radio" id="system-fpa-mode-CONTINUOUS" name="radio" value="CONTINUOUS" class="ui-helper-hidden-accessible">
    <label for="system-fpa-mode-CONTINUOUS" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Continuous</span>
    </label>
    <input type="radio" id="system-fpa-mode-RAMP_AND_HOLD" name="radio" value="RAMP_AND_HOLD" class="ui-helper-hidden-accessible" checked="checked">
    <label for="system-fpa-mode-RAMP_AND_HOLD" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false" aria-pressed="false">    <span class="ui-button-text">Ramp and Hold</span>
    </label>
</div>
<div id="system-modes-stillimage" class="ui-buttonset">
    <input type="radio" id="system-stillimage-mode-TIMELAPSE" name="radio" value="TIMELAPSE" class="ui-helper-hidden-accessible">
    <label for="system-stillimage-mode-TIMELAPSE" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false" aria-pressed="false">    <span class="ui-button-text">Timelapse</span>
    </label>
    <input type="radio" id="system-stillimage-mode-CONTINUOUS" name="radio" value="CONTINUOUS" class="ui-helper-hidden-accessible">
    <label for="system-stillimage-mode-CONTINUOUS" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Continuous</span>
    </label>
    <input type="radio" id="system-stillimage-mode-RAMP_AND_HOLD" name="radio" value="RAMP_AND_HOLD" class="ui-helper-hidden-accessible">
    <label for="system-stillimage-mode-RAMP_AND_HOLD" class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active ui-corner-right" role="button" aria-disabled="false" aria-pressed="true"><span class="ui-button-text">Ramp and Hold</span>
    </label>
</div>

Вот мой Javascript:

var continuousButton = $('#system-fpa-mode-CONTINUOUS');
continuousButton.prop('checked', true);

// try uncommenting the following two lines to see the first set of radio buttons lose their value
//var stillimageButton = $('#system-stillimage-mode-CONTINUOUS');
//stillimageButton.prop('checked', true);

http://jsfiddle.net/bYk6y/10/

Когда вызывается второе обновление, первая группа радиостанций теряет значение. Что я делаю не так?

mike boldischar 06 янв. 2014, в 19:05

Источник

3

У вас есть только одна радиогруппа. Все они имеют name="radio" .
Barmar 06 янв. 2014, в 17:56

Теги:

javascript

jquery

2 ответа

0

Группа радио - это все кнопки с одинаковым атрибутом name. Не имеет значения, находятся ли они в разных DIV. Если вы хотите, чтобы две группы были отдельными, вы должны дать им разные имена. Таким образом, первая группа может быть:

name="radio-fpa"

а второй будет:

name="radio-stillimage"

Barmar 06 янв. 2014, в 15:47

0

Спасибо за объяснение. Это именно то, что я сделал.
mike boldischar 06 янв. 2014, в 18:23

Ещё вопросы

У вас есть только одна радиогруппа. Все они имеют name="radio" .
Спасибо за объяснение. Это именно то, что я сделал.

Roach Lord · Accepted Answer · 2014-01-06T15-46-00.000Z

Измените атрибуты name:

Первая группа должна быть чем-то вроде

name="radio1"

И второе

name="radio2"

Вы поймали ошибку, поэтому я отдаю вам должное. Спасибо!!
@mikeboldischar Мое удовольствие. Мы все время от времени сталкиваемся с такими мелочами.