Question

我正在尝试在horizontal control group中实现jquery mobile，里面有单选按钮。我正在尝试从dynamically构建HTML字符串code behind 这些单选按钮处于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循环中的最后一个radio元素。谁能告诉我代码有什么问题？或者我在这里错过了什么？

编辑：添加生成的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

中只检查了1个无线电元素

Here's an image of the desired effect

Answer 1

您的姓名属性（如ID 1）必须是唯一的。

工作示例：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>

Jquery移动单选按钮选择

1 个答案: