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 ...
随机推荐
- [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: 找出数组中最大的数 ...
- vue中是使用富文本编辑器vue-quill-edit
之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便 近期项目vue单页面,就使用这个编辑器组件吧! 一.安装 cnpm install vue-quill-editor 二. ...
- python高级编程
2,python一切皆对象 type,object,class的关系 python常见的内置类型 3,魔法函数 魔法函数 4,深入类和对象 python鸭子类型(多态)抽象基类(abc模块) pyth ...
- MYSQL查询操作 详细
学习目标 1 掌握select查询所有字段.指定字段的数据 2 掌握消除重复行命令distinct 3 掌握as给字段.表起别名 4 掌握条件查询where后跟比较运算符.逻辑运算符的用法 5 掌握条 ...
- [BZOJ1596]电话网络
Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...
- 第六次java作业
class Check{ public boolean validate(String name,String password){ if(name.equals("fuxingmen&qu ...
- javascript数据基本类型和引用数据类型区别
基本类型和引用数据类型区别 1.基本数据类型和引用数据类型 javascript中有两种数据类型,分别是基本数据类型和引用数据类型: 基本数据(原始数据)类型指的是简单的数据段,而引用数据类型则指的是 ...
- Oracle 11g OGG 修改 trail 文件大小
OGG 修改 trail 文件大小 2018-06-11 15:14 380 0 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/285 ...
- Shadow Properties之美(一)【Microsoft Entity Framework Core随笔】
最近在做公司的项目的时候,开始把部分程序迁移到EF Core,然后有了一些感触,趁着还没忘却,还是先记录下来. EF Core还在成长中,我写这个的时候,版本是2.2.如果对着已有的EF 5/6来说, ...
- java算法03 - 常用的8种排序算法
Java常用的八种排序算法: 插入排序 - 直接插入排序 每次将待排序的记录按照关键字的大小,插入到前面已经排好序的记录的适当位置.直到全部记录插入完成. 代码实现 /** * 直接插入排序 O(n^ ...