Question

我在一个HTML页面上有多个单选按钮组，对于每个组，我想要检查第一个按钮。当我在HTML中设置它时，选中的样式仅应用于第二组中的按钮。

<fieldset data-role="controlgroup" data-mini="false" data-type="horizontal">
    <input type="radio" name="radio-choice" id="A_AM_RadioButton" checked="checked"/>
        <label for="A_AM_RadioButton" id="A_AM_RadioButtonLabel">AM</label>
    <input type="radio" name="radio-choice" id="A_PM_RadioButton"/>
        <label for="A_PM_RadioButton" id="A_PM_RadioButtonLabel">PM</label>
</fieldset>                             
<fieldset data-role="controlgroup" data-mini="false" data-type="horizontal">
    <input type="radio" name="radio-choice" id="B_AM_RadioButton" checked="checked"/>
        <label for="B_AM_RadioButton" id="B_AM_RadioButtonLabel">AM</label>
    <input type="radio" name="radio-choice" id="B_PM_RadioButton"/>
        <label for="B_PM_RadioButton" id="B_PM_RadioButtonLabel">PM</label>
</fieldset>

当我从HTML中留下“checked”属性并尝试在我的JS文件中应用该属性时，如下所示，我得到相同的结果。

$("#A_AM_RadioButton").attr("checked",true);
$("#B_AM_RadioButton").attr("checked",true);
$("input[type='radio']").checkboxradio("refresh");

我可以理解JQuery Mobile不希望检查字段集中的多个按钮，而是跨字段集吗？

如果有人可能能够告诉我我的错误（或者我正在尝试的是什么），我将不胜感激。谢谢！

Answer 1

尝试更改每个字段集的名称。

  <fieldset data-role="controlgroup" data-mini="false" data-type="horizontal">
    <input type="radio" name="radio-choice" id="A_AM_RadioButton" checked="checked"/>
        <label for="A_AM_RadioButton" id="A_AM_RadioButtonLabel">AM</label>
    <input type="radio" name="radio-choice" id="A_PM_RadioButton"/>
        <label for="A_PM_RadioButton" id="A_PM_RadioButtonLabel">PM</label>
</fieldset>                             
<fieldset data-role="controlgroup" data-mini="false" data-type="horizontal">
    <input type="radio" name="radio-choice-2" id="B_AM_RadioButton" checked="checked"/>
        <label for="B_AM_RadioButton" id="B_AM_RadioButtonLabel">AM</label>
    <input type="radio" name="radio-choice-2" id="B_PM_RadioButton"/>
        <label for="B_PM_RadioButton" id="B_PM_RadioButtonLabel">PM</label>
</fieldset>

Answer 2

首先，您需要找到data-role="controlgroup"然后为每个组选择第一个input[type=radio]。同时，将其“.prop更改为checked和refresh。

Working example.

$(document).find('[data-role=controlgroup]').each(function() {
 $(this).find('input[type=radio]').first().prop('checked', true).checkboxradio('refresh');
});

JQuery Mobile单选按钮 - 一页上有多个组

2 个答案: