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. [leecode]---11.container with most water

    description: Input: [1,8,6,2,5,4,8,3,7]Output: 49 思路1: 从(1,a1)开始向后算面积,需要两层n循环,时间复杂度n2 思路2: 找出数组中最大的数 ...

  2. vue中是使用富文本编辑器vue-quill-edit

    之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便 近期项目vue单页面,就使用这个编辑器组件吧! 一.安装  cnpm install vue-quill-editor 二. ...

  3. python高级编程

    2,python一切皆对象 type,object,class的关系 python常见的内置类型 3,魔法函数 魔法函数 4,深入类和对象 python鸭子类型(多态)抽象基类(abc模块) pyth ...

  4. MYSQL查询操作 详细

    学习目标 1 掌握select查询所有字段.指定字段的数据 2 掌握消除重复行命令distinct 3 掌握as给字段.表起别名 4 掌握条件查询where后跟比较运算符.逻辑运算符的用法 5 掌握条 ...

  5. [BZOJ1596]电话网络

    Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...

  6. 第六次java作业

    class Check{ public boolean validate(String name,String password){ if(name.equals("fuxingmen&qu ...

  7. javascript数据基本类型和引用数据类型区别

    基本类型和引用数据类型区别 1.基本数据类型和引用数据类型 javascript中有两种数据类型,分别是基本数据类型和引用数据类型: 基本数据(原始数据)类型指的是简单的数据段,而引用数据类型则指的是 ...

  8. Oracle 11g OGG 修改 trail 文件大小

    OGG 修改 trail 文件大小 2018-06-11 15:14 380 0 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/285 ...

  9. Shadow Properties之美(一)【Microsoft Entity Framework Core随笔】

    最近在做公司的项目的时候,开始把部分程序迁移到EF Core,然后有了一些感触,趁着还没忘却,还是先记录下来. EF Core还在成长中,我写这个的时候,版本是2.2.如果对着已有的EF 5/6来说, ...

  10. java算法03 - 常用的8种排序算法

    Java常用的八种排序算法: 插入排序 - 直接插入排序 每次将待排序的记录按照关键字的大小,插入到前面已经排好序的记录的适当位置.直到全部记录插入完成. 代码实现 /** * 直接插入排序 O(n^ ...