Bootstrap   发布时间:2022-04-18  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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的原因,目前效果看来不错。

大佬总结

以上是大佬教程为你收集整理的bootstrap框架下 单选按钮组的选中以及取值问题全部内容,希望文章能够帮你解决bootstrap框架下 单选按钮组的选中以及取值问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。