利用jQuery和bootstrap更改radio样式

<div class="container body-content"><div class="row"><div class="text-center col-xs-12"><h3>标题</h3><div class="well well-sm"><div class="btn-group" data-toggle="buttons" id="Select"><!--     更改radio传统样式，label与btn绑定可以提高用户的体验效果，增大选区范围，但是btn样式会将“圆点”选择区覆盖掉，可以利用图标glyphicon代替原有的“圆点”选择区--><label class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span><input type="radio" /> 选择一</label><label class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span><input type="radio" /> 选择二</label><label class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span><input type="radio" /> 选择三</label></div></div></div></div></div>

  "use strict";$(document).ready(function () {$("#Select .btn").on('click', function () {ToggleRadioButtons("#Select", $(this));});});function ToggleRadioButtons(groupName, current){//在当前的btn-group里先清除所有“选取”图标，全部换成“取消”样式（“初始化”）$(groupName + " .glyphicon-check").removeClass("glyphicon-check").addClass("glyphicon-unchecked");//alert("暂停啦");//更改当前用户选择的那个btn图标current.find(":first-child").removeClass("glyphicon-unchecked").addClass("glyphicon-check");}

利用函数将所有的选择历史先清除，之后再利用$(this)捕捉到用户的当前选择并更改图标，此方法可以省略到很多不必要的代码

利用jQuery和bootstrap更改radio样式相关推荐

微信小程序 - 更改radio和checkbox选中样式
点击下载源码:示例-更改radio或checkbox选中样式转载于:https://www.cnblogs.com/cisum/p/9761807.html
jq.html()改变颜色,jquery怎么更改css样式？
使用jQuery可以更改CSS的样式,例如更改颜色或在执行操作时更改元素的大小,本篇文章我们就来给大家介绍使用jQuery更改CSS样式的具体方法,下面来看具体的内容. 在jQuery中,可以使用CS ...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
利用jquery的imgAreaSelect插件实现图片裁剪示例
将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能.我们来看看它 ...
html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
第五模块：WEB开发基础-第8章 Jquery开发BootStrap
系列文章目录 Jquery开发&BootStrap 文章目录系列文章目录前言一.jQuery 1.知识点介绍 2.基础核心使用 3.入口函数 4.如何处理多个库$冲突问题二.选择器 1 ...
vue整合jQuery和bootstrap，实现官网效果，实现Glyphicon Halflings 的字体图标
引入jQuery 因为bootstrap里面有很多动态效果是基于jquery实现的,为了能完整显示效果以及后续开发的方便,在引入bootstrap之前先将jquery引入首先在打开的vue项目控制台 ...
利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐! 大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮 ...
Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

利用jQuery和bootstrap更改radio样式

利用jQuery和bootstrap更改radio样式相关推荐

最新文章

热门文章