Question

我在更新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/

当第二次更新被调用时，第一个无线电组丢失了它的值。我做错了什么？

Answer 1

更改name属性：

第一组应该是

name="radio1"

第二个

name="radio2"

Answer 2

广播组是具有相同name属性的所有按钮。如果他们在不同的DIV中并不重要。如果您希望两个组分开，则必须为它们指定不同的名称。所以第一组可能是：

name="radio-fpa"

，第二个是：

name="radio-stillimage"

JQuery第二个单选按钮不起作用

2 个答案: