使用Jquery获取Bootstrap Radio Group当前选中的单选框的值

简介: 例如有以下的bootstrap radio buttons group 红色 绿色 蓝色 现在,我需要使...

例如有以下的bootstrap radio buttons group

<div class="btn-group" id="color" data-toggle="buttons">
       <label class="btn btn-default">
         <input type="radio" class="toggle" value="1"> 红色
       </label>
       <label class="btn btn-default">
         <input type="radio" class="toggle" value="2"> 绿色
       </label>
       <label class="btn btn-default">
         <input type="radio" class="toggle" value="3"> 蓝色
       </label>
</div>

现在,我需要使用Jquery来获取当前选中的颜色,怎么操作呢?

在bootstrap里,button group 也是用radio来模拟实现的,它封装实现了实际的radio操作,所以我们可以直接用Jquery的选择器来获取radio的选中值,如下:

var selectedColor = $('#color input:radio:checked').val();

文章来源:使用Jquery获取Bootstrap Radio Group当前选中的单选框的值

----------------------------------------------------
专注Web和.NET开发,对前沿技术有深厚的兴趣~~~
个人独立博客图享网--【 http://2sharings.com】,欢迎到访。
目录
相关文章
|
8月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
145 0
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
78 0
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
43 3
|
4月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
35 2
|
5月前
|
前端开发 JavaScript
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
这篇文章详细说明了如何在项目中整合Bootstrap V3版本,包括下载Bootstrap和jQuery、将文件复制到静态资源目录、项目中离线引用这些文件,并提供了完整页面代码示例。
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
|
5月前
|
JavaScript 前端开发
Bootstrap‘s JavaScript requires jQuery
文章讨论了网页开发中因jQuery库未正确引入或顺序不当导致的三个常见错误,并指出解决这些问题需要确保jQuery在其他依赖它的脚本之前加载。
|
8月前
|
Java 数据库 Maven
基于SSM框架疫情之下社区管理系统(spring+springmvc+mybatis+jsp+jquery+bootstrap)
基于SSM框架疫情之下社区管理系统(spring+springmvc+mybatis+jsp+jquery+bootstrap)
|
JavaScript 前端开发
踩坑-Uncaught Error: Bootstrap's JavaScript requires jQuery
踩坑-Uncaught Error: Bootstrap's JavaScript requires jQuery
185 0
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
65 0
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)