bootstrap框架下 单选按钮组的选中以及取值问题

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框架下 单选按钮组的选中以及取值问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。