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移動單選按鈕選擇

回答

相關問題