radio用于單選的情況 DOM結構 ~~~ <div class="mui-input-row mui-radio"> <label>radio</label> <input name="radio1" type="radio"> </div> ~~~ 默認radio在右側顯示，若希望在左側顯示，只需增加.mui-left類即可，如下： ~~~ <div class="mui-input-row mui-radio mui-left"> <label>radio</label> <input name="radio1" type="radio"> </div> ~~~ 若要禁用radio，只需在radio上增加disabled屬性即可； mui基于列表控件，提供了列表式單選實現；在列表根節點上增加.mui-table-view-radio類即可，若要默認選中某項，只需要在對應li節點上增加.mui-selected類即可，dom結構如下： ~~~ <ul class="mui-table-view mui-table-view-radio"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <li class="mui-table-view-cell mui-selected"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> </ul> ~~~ 列表式單選在切換選中項時會觸發selected事件，在事件參數（e.detail.el）中可以獲得當前選中的dom節點，如下代碼打印當前選中項的innerHTML： ~~~ var list = document.querySelector('.mui-table-view.mui-table-view-radio'); list.addEventListener('selected',function(e){ console.log("當前選中的為："+e.detail.el.innerText); }); ~~~