模擬單選擇按鈕是通過(guò)一組按鈕來(lái)實(shí)現(xiàn)單選擇操作。使用按鈕組來(lái)模擬單選按鈕組，能夠讓設(shè)計(jì)更具個(gè)性化，可以定制出更美觀的單選按鈕組。
在Bootstrap框架中按鈕插件中，可以通過(guò)給按鈕組自定義屬性data-toggle="buttons"，如下所示：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="options1">男
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options2">女
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options3">未知
</label>
</div>
運(yùn)行效果如下：
注：使用這種效果的時(shí)候，無(wú)需借助JavaScript代碼來(lái)觸發(fā)，因?yàn)槟J(rèn)Bootstrap就已經(jīng)為用戶初始化好了。
我來(lái)試試：補(bǔ)充右側(cè)代碼以實(shí)現(xiàn)“單選擇按鈕模似單選按鈕組的效果”
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="options1">男
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options2">女
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options3">未知
</label>
</div>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)