jquery移动单选按钮选择

我试图实现一个horizontal control group在jquery mobile里面有单选按钮。我正尝试从code behind构建HTML字符串dynamically。
这些单选按钮位于for循环中。jquery移动单选按钮选择

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>

只有1无线电元件是越来越内fieldset

Here's an image of the desired effect检查。

来源

2013-02-23 Mohammed Aamir K

你能也是一个HTML输出添加到您的问题吗？ – Gajotres 2013-02-23 09:43:44

@Gajotres - 感谢您的回复。添加了HTML输出。 – 2013-02-23 09:50:27

从我所看到的第一个元素被检查：http://jsfiddle.net/Gajotres/8BGEq/ – Gajotres 2013-02-23 09:53:12

您的姓名属性（如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>

来源

2013-02-23 11:19:06 Gajotres

非常感谢。这解决了问题:) – 2013-02-23 11:36:27

jquery移动单选按钮选择

回答

相关问题