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 ...
随机推荐
- switch与if语句的应用
C语言自学之switch与if语句的应用 #include<stdio.h> #include<stdlib.h> int main() { ;//需要计算的年份 ;//需要计 ...
- Word中如何删除目录页的页码
---恢复内容开始--- word中插入目录之后想要为每页添加页码,如果我们直接添加页码的话会出现目录是第一页,正文部分的页码是从2开始而不是1,用下面的方法就可以解决 首先让文档中的所有符号可见 第 ...
- 跟踪mqttv3源码(一)
Spring整合MQTT pom.xml <!-- MQTT消息队列 --> <dependency> <groupId>org.eclipse.paho</ ...
- [luogu P3391] 文艺平衡树
[luogu P3391] 文艺平衡树 题目背景 这是一道经典的Splay模板题——文艺平衡树. 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区 ...
- 点云格式-pcd
每一个pcd文件包含一个文件头,它声明文件中存储的点云数据的特性(元数据).pcd文件头必须用ASCII码来编码.头文件属性字段都以一个新行(\n)分开.从0.7版本开始,pcd文件头包含下面的字段: ...
- TCP建立连接三次握手和释放连接四次握手
TCP建立连接三次握手和释放连接四次握手 [转载]http://blog.csdn.net/guyuealian/article/details/52535294 在谈及TCP建立连接和释 ...
- [转]利用Jenkins的Pipeline实现集群自动化部署SpringBoot项目
环境准备 Git: 安装部署使用略. Jenkins: 2.46.2版本安装部署略(修改jenkins执行用户为root,省得配置权限) JDK: 安装部署略. Maven: 安装部署略. 服务器免密 ...
- css三种基本选着器
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- JavaWeb+SVN+Maven+Tomcat +jenkins实现自动化部署
网址:https://blog.csdn.net/liyong1028826685/article/details/88289218 在日常开发项目中常见的开发模式是使用代码库来存放我们的项目例如:S ...
- Flask框架基础--第一篇
1.flask框架和其他几种框架的优缺点对比 Django : 优点 - 大而全所有组件都是有组织内部开发高度定制化 教科书级别的框架 缺点 - 大到浪费资源,请求的时候需要的资源较高 Flask : ...