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. vue 修改 端口号

    具体步骤如下: vue小白交流群,希望能够帮助到大家!

  2. Dynamic CRM工作流流程实战

    前言在研究了MSCRM中插件的使用之后,不可避免需要研究工作流,工作流在各种营销系统中都举足轻重. 关于工作流功能:使用工作流可在后台实现业务流程自动化.类别:分为后台工作流(异步)和实时工作流(同步 ...

  3. 微信小程序----用户拒绝授权,重新调起授权

    获取用户信息 wx.getUserInfo({ withCredentials: true, success: function (res) { var nickName = res.userInfo ...

  4. list<实体类>互相嵌套和前台取值问题

    list<实体类>嵌套list<实体类>,必须保证嵌套的实体类里面有这个list对象,把这个list<实体类>当做一个对象 这是需要解析的数据,并把这些数据封装成l ...

  5. Spring框架中的定时器 使用和配置

    Spring框架中的定时器 如何使用和配置 转载自:<Spring框架中的定时器 如何使用和配置>https://www.cnblogs.com/longqingyang/p/554543 ...

  6. windows系统下安装rabbitmq教程

    1.简介 安装rabbitmq需要下载软件Erlang语言开发包和RabbitMQ文件包.文件最新下载地址如下: Erlang: https://www.erlang.org/ RabbitMQ: h ...

  7. day1扩展作业

    作业一:博客作业二:编写登陆接口,●输入用户名密码(有文件存储用户名,命名)●认证成功后显示欢迎信息●输错三次后锁定(再次运行程序,还是输入上次输入的就显示已被锁定)作业三:多级菜单●三级菜单 ●可依 ...

  8. centos7上keepalived的安装和配置

    1.环境规划1)master:node1,centos7.5,eth0:192.168.1.11,eht1:10.10.1.11,keepalive2)backup:node1,centos7.5,e ...

  9. 用EPPlus 读取excel,代码出错, the given key is not present in the dictionary

    using (ExcelPackage ep = new ExcelPackage(new FileInfo(path))) { ExcelWorksheet ws = ep.Workbook.Wor ...

  10. 关于$(function(){})的问题

    在开发过程中遇到了一个问题 , 页面需要一个列表展示 , 为了方便数据的获取和渲染 ,就选择了easy UI的网格来做 , 这个时候问题就出现了 , 那就是网格需要触发的函数不写在$(function ...