jQuery Mobile的多選擇列表中用複選框

Question

• 大廈JQM應用
• 需要顯示旁邊的每一個，將檢查/取消選中爲用戶做出他們的選擇的近200個項目與複選框的滾動列表。
• 如果可能的話，尋找一種使用JQM實現所述列表的乾淨方式，但我沒有在他們的文檔/演示中看到任何東西。
• 在JQM中是否有用，或者我應該自己推出？

謝謝。

Answer 1

實施例：

• http://jsfiddle.net/qvx85/14/

JS

// Add 200 list items 
for(i=0; i < 200; i++){ 
    createListItems(i, 'hello-'+i); 
} 

// add jQM markup 
$('#theList').trigger('create'); 

// refresh the list 
$('#theList').listview('refresh'); 

function createListItems(number, option) { 
    var item = '<li><h3>Question '+number+' using Checkbox Options</h3><p><strong>Do you '+option+'?</strong></p><p>Please select an option</p><p class="ui-li-aside"><fieldset data-role="controlgroup" data-type="horizontal"><input type="checkbox" name="q'+number+'" id="q'+number+'-'+option+'" class="custom" /><label for="q'+number+'-'+option+'">'+option+'</label></fieldset></p></li>'; 

    $('#theList').append(item); 
} 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 

     <h2>List of Questions</h2> 
     <ul data-role="listview" data-inset="true" id="theList"> 
      <li> 
       <h3>Question 1 using Radio Options</h3> 
       <p><strong>Do you agree?</strong></p> 
       <p>Please select an option</p> 
       <p class="ui-li-aside"> 
        <fieldset data-role="controlgroup" data-type="horizontal"> 
         <input type="radio" name="q1" id="q1-agree" value="agree" /> 
         <label for="q1-agree">Agree</label> 
         <input type="radio" name="q1" id="q1-disagree" value="disagree" /> 
         <label for="q1-disagree">Disagree</label> 
        </fieldset> 
       </p> 
      </li> 
      <li> 
       <h3>Question 2 using Radio Options</h3> 
       <p><strong>Another question</strong></p> 
       <p>Please select an answer</p> 
       <p class="ui-li-aside"> 
        <fieldset data-role="controlgroup" data-type="horizontal"> 
         <input type="radio" name="q2" id="q2-agree" value="agree" /> 
         <label for="q2-agree">Agree</label> 
         <input type="radio" name="q2" id="q2-disagree" value="disagree" /> 
         <label for="q2-disagree">Disagree</label> 
        </fieldset> 
       </p> 
      </li> 
      <li> 
       <h3>Question 3 using Checkbox Options</h3> 
       <p><strong>Do you agree?</strong></p> 
       <p>Please tap to select the option</p> 
       <p class="ui-li-aside"> 
        <fieldset data-role="controlgroup" data-type="horizontal">       
         <input type="checkbox" name="q3" id="q3-agree" class="custom" /> 
         <label for="q3-agree">Agree</label>  
        </fieldset> 
       </p> 
      </li> 
     </ul> 

    </div> 
</div>