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框架下 单选按钮组的选中以及取值问题的更多相关文章
- input选中 和 select点击下拉选择获取选中选项的值
1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...
- checkbox 选中、取值处理
[1].[代码] checkbox 选中.取值处理 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- jQuery操作CheckBox的方法(选中,取消,取值)
jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...
- jquery操作select(选中,取值)
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...
- jQuery操作CheckBox的方法(选中,取消,取值)详解
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- Bootstrap框架下实现图片切换
准备图片,把相关记录添加至数据库表中: 创建一个存储过程,获取所有记录: 在ASP.NET MVC专案中,部署Bootstrap环境...... 然后创建一个model: using System; ...
- jQuery bootstrap框架下重置下拉框选择
前端页面中下拉选择框采用bootstrap-select美化,如下图:
- GridView 中绑定DropDownList ,下拉框默认选中Label的值
在GridView中,我们 有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-Horiz ...
- jquery 监听radio选中,取值
$(document).ready(function(){ $("input[name=discount]").each(function(){ $(this).click(fun ...
随机推荐
- STL 小白学习(10) map
map的构造函数 map<int, string> mapS; 数据的插入:用insert函数插入pair数据,下面举例说明 mapStudent.insert(pair<, &qu ...
- use this method get wifi from notebook
sudo apt dist-upgrade http://cache.baiducontent.com/c?m=9d78d513d9981de90fb3837e7c478a265b09c0307a8c ...
- css——letter spacing
letter spacing属性是用来设置字母的间距 实例: 设置h1和h2之间字母的间距 <html> <head> <style type="text/cs ...
- MySql5.5安装详细说明
双击MySql5.5安装文件开始: next 打勾,Next 选Custom,原因如下面所述: Typical(典型安装) Installs the most common program fea ...
- OTP gen_server
erlang behaviour小结之gen_server OTP入门 分类: Erlang2012-08-06 18:55 867人阅读 评论(0) 收藏 举报 servererlangcallba ...
- struts2实现文件上传和下载
在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来 ...
- eclipse安装反编译插件(附jad下载)
eclipse安装反编译插件(附jad下载) 博客分类: eclipse 一.eclipse反编译插件Jadclipse jadclips插件网站: http://jadclipse.sou ...
- for each ;for in;for of 三者的区别
for each: for each 方法没办法用break语句跳出循环并且无法用return语句从函数体 内返回 for in: 1.index 值 会是字符串(String)类型 2.循环不仅会遍 ...
- 收藏nginx学习
http://blog.csdn.net/u012186351/article/details/50605672 http://blog.csdn.net/qq_25371579/article/de ...
- python基础14_文件操作
文件操作,通常是打开,读,写,追加等.主要涉及 编码 的问题. #!/usr/bin/env python # coding:utf-8 ## open实际上是从OS请求,得到文件句柄 f = ope ...