jQuery移动单选按钮选择

Question

我正在尝试在内部具有单选按钮的jquery mobile实现horizontal control group 。 我正在尝试从code behind dynamically构建HTML字符串。
这些单选按钮处于for循环中。

StringBuilder tileString = new StringBuilder(string.Empty);     

foreach (Product product in productsInCart)
        {               
            tileString.Append("<div><legend >Choose shipping type:</legend></div><br />");

            tileString.Append("<input type='radio' name='radio-choice-1' id='radio-choice-1' onclick='findPaymentMethod()' value='In Flight' checked='checked' />");

            tileString.Append("<label for='radio-choice-1'>In flight</label>");

            tileString.Append("<input type='radio' name='radio-choice-1' id='radio-choice-2' value='On Arrival' onclick='findPaymentMethod()' />");

            tileString.Append("<label for='radio-choice-2'>On Arrival</label>");                           
        } `

如您所见，第一个单选按钮上有一个属性。

checked='checked'

但是，当在for循环中运行此命令时，只会检查for循环中的最后一个单选元素。 谁能建议我代码有什么问题？ 还是我在这里想念什么？

编辑 ：添加生成的HTML字符串。

<div data-role='fieldcontain'>
            <fieldset data-role='controlgroup' data-type='horizontal' id='6' data-mini='true'>
              <div>
                <legend >Choose shipping type:</legend>
              </div>
              <br />
              <input type='radio' name='radio-choice-1' id='radio-choice-16'  value='In Flight' checked='checked'/>
              <label for='radio-choice-16'>In flight</label>
              <input type='radio' name='radio-choice-1' id='radio-choice-26' value='On Arrival'  />
              <label for='radio-choice-26'>On Arrival</label>
            </fieldset>
          </div>`

`<div data-role='fieldcontain'>
            <fieldset data-role='controlgroup' data-type='horizontal' id='1' data-mini='true'>
              <div>
                <legend >Choose shipping type:</legend>
              </div>
              <br />
              <input type='radio' name='radio-choice-1' id='radio-choice-11'  value='In Flight' checked='checked'/>
              <label for='radio-choice-11'>In flight</label>
              <input type='radio' name='radio-choice-1' id='radio-choice-21' value='On Arrival'  />
              <label for='radio-choice-21'>On Arrival</label>
            </fieldset>
          </div>

fieldset仅检查了一个无线电元素

这是预期效果的图像 。

Answer 1

您的名称属性（如id一）必须唯一。

工作示例： http : //jsfiddle.net/Gajotres/SBxVc/

<div data-role='fieldcontain'>
     <fieldset data-role='controlgroup' data-type='horizontal' id='6' data-mini='true'>
         <div>
             <legend >Choose shipping type:</legend>
         </div>
         <br />
         <input type='radio' name='radio-choice-16' id='radio-choice-16'  value='In Flight' checked='checked'/>
         <label for='radio-choice-16'>In flight</label>
         <input type='radio' name='radio-choice-26' id='radio-choice-26' value='On Arrival'  />
         <label for='radio-choice-26'>On Arrival</label>
     </fieldset>
</div>

<div data-role='fieldcontain'>
    <fieldset data-role='controlgroup' data-type='horizontal' id='1' data-mini='true'>
        <div>
            <legend >Choose shipping type:</legend>
        </div>
        <br />
        <input type='radio' name='radio-choice-11' id='radio-choice-11'  value='In Flight' checked='checked'/>
        <label for='radio-choice-11'>In flight</label>
        <input type='radio' name='radio-choice-21' id='radio-choice-21' value='On Arrival'  />
        <label for='radio-choice-21'>On Arrival</label>
    </fieldset>
</div>