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框架下 单选按钮组的选中以及取值问题的更多相关文章

  1. input选中 和 select点击下拉选择获取选中选项的值

    1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...

  2. 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 ...

  3. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  4. jquery操作select(选中,取值)

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

  5. jQuery操作CheckBox的方法(选中,取消,取值)详解

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  6. Bootstrap框架下实现图片切换

    准备图片,把相关记录添加至数据库表中: 创建一个存储过程,获取所有记录: 在ASP.NET MVC专案中,部署Bootstrap环境...... 然后创建一个model: using System; ...

  7. jQuery bootstrap框架下重置下拉框选择

    前端页面中下拉选择框采用bootstrap-select美化,如下图:

  8. GridView 中绑定DropDownList ,下拉框默认选中Label的值

    在GridView中,我们 有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-Horiz ...

  9. jquery 监听radio选中,取值

    $(document).ready(function(){ $("input[name=discount]").each(function(){ $(this).click(fun ...

随机推荐

  1. Debian Nginx 下载 .apk 文件时候报 403 错误 [1]

    一.版本介绍 Degian : 8 jessie Nginx  : 1.6.2 发生时间 : 2018-12-15 二.问题说明 客户浏览器访问Nginx的公开目录中放入了一个.apk文件,公开目录可 ...

  2. [转] jquery作者John Resig编写的微模板引擎:JavaScript Micro-Templating

    I've had a little utility that I've been kicking around for some time now that I've found to be quit ...

  3. oracleDBconsole服务启动失败

    问题出现的故障:    在一次正常使用企业管理器后,重新启动计算机,再次启动OracleDBConsoleORCL服务时,报:Windows 不能在 本地计算机 启动 OracleDBConsoleo ...

  4. messageQ 消息队列

    之后就是对MessageQ的打开,关闭, 消息的发送和接受. MessageQ_create(),MessageQ_delete(): 对消息的创建和删除. MessageQ_open(); Mess ...

  5. MySQL— pymysql模块(防止sql注入),可视化软件Navicat

    一.Pymysql import pymysql #python2.X 中是 mysqldb 和 pythonmysql 用法是一模一样的 #pymysql可以伪装成上面这两个模块 user = in ...

  6. caffe源码阅读

    参考网址:https://www.cnblogs.com/louyihang-loves-baiyan/p/5149628.html 1.caffe代码层次熟悉blob,layer,net,solve ...

  7. npm安装material-design-icons总是失败

    项目中使用npm或者cnpm安装material-design-icons总是失败 解决办法: 1.自己上github下载后拷贝到项目node_modules目录下 2.还有npm安装老出问题,npm ...

  8. python学习小总结(列表、元组、字典、集合、字符串)

    ---恢复内容开始--- 一.列表(list) 1.添加 append():追加,在列表末尾添加元素. 列表名.append(添加的元素) extend():扩展,在列表末尾添加元素. 列表名.ext ...

  9. es6 - 一共有 6 种声明变量的方法(var, function, let, const, class, import)

    var命令和function命令声明的全局变量,依旧是顶层对象的属性:let命令.const命令.class命令声明的全局变量,不属于顶层对象的属性.也就是说,从 ES6 开始,全局变量将逐步与顶层对 ...

  10. 最小生成树 HDU1301 (kuskal & prim)

    Kruskal:1.边排序,2.按边从小到大连接森林至树   3.并查集 #include <stdio.h> #include <stdlib.h> #include < ...