mui 之 选择按钮

多选

同一组多选按钮，name 一致。

代码块：mcheckbox

<div class="mui-content-padded">
    <h5>多选按钮</h5>
    <div class="mui-input-row mui-checkbox">
        <label>Python</label>
        <input name="Checkbox" type="checkbox" checked>
    </div>
    <div class="mui-input-row mui-checkbox">
        <label>Scala</label>
        <input name="Checkbox" type="checkbox" checked>
    </div>
</div>

单选

同一组单选按钮，name 一致。

代码块：mradio

<div class="mui-content-padded">
    <h5>单选按钮</h5>
    <div class="mui-input-row mui-radio ">
        <label>男</label>
        <!-- checked 默认选中 -->
        <input name="radio" type="radio" checked>
    </div>
    <div class="mui-input-row mui-radio ">
        <label>女</label>
        <input name="radio" type="radio">
    </div>
</div>

修改显示位置

默认radio在右侧显示，若希望在左侧显示，只需增加mui-left类即可

若要禁用radio，只需在radio上增加disabled属性即可；

<h5>左端显示</h5>
<div class="mui-input-row mui-radio mui-left">
    <label>radio</label>
    <input name="radio1" type="radio">
</div>

列表式单选

<h5>列表使单选</h5>
<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节点

<h5>列表使单选</h5>
<ul id="li-radio" class="mui-table-view mui-table-view-radio">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Python</a>
    </li>
    <li class="mui-table-view-cell mui-selected">
        <a class="mui-navigate-right">Java</a>
    </li>
    <p id="p-li"></p>
</ul>
<script type="text/javascript">
    // 绑定 selected 事件
    document.getElementById("li-radio").addEventListener("selected",function(e){
        var li = document.getElementById("p-li")
        // 获取值
        li.innerHTML = "你选着的是" + e.detail.el.innerHTML
    })
</script>