1、業務功能：四個按鈕只能選中一個，且默認選擇水準4

先看代碼。

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" class="level_select"? name="level_select" value="1">水準4（波/測）
</label>
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="2">水準3（波/測）
</label>
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="3">水準2（波/測）
</label>
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="4">水準1（波/測）
</label>
</div>

這是查看了bootstrap的資料做的四個按鈕的按鈕組。

業務需求：默認選中水準4，查找bootstrap資料并沒有找到合適的解決辦法，后來在一篇博客中找到一個方法（實在抱歉，忘記博客的地址了= = ）

在代碼中加了active，代碼如下：

<label class="btn btn-info active">
<input type="radio" class="level_select" checked name="level_select" value="1">水準4（波/測）
</label>

這樣就實現了單選及默認選擇水準4的頁面效果。

2、關于取值。

我知道兩種取值辦法

（1）、var level_select= $("radio:checked").val();

　　這種取值方法是可以取值的，但是我的頁面中有很多這種單選radio，為了避免歧義，所以我選擇了下面這種取值。

（2）、var level_select= $(".level_select:checked").val();

這就是為什么input里面我加了class的原因，目前效果看來不錯。

轉載于:https://www.cnblogs.com/archwyf/p/9055475.html

總結

以上是生活随笔為你收集整理的bootstrap框架下 单选按钮组的选中以及取值问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。