jQuery 改变checkbox和radio select的样式

风飞飘扬 2014-06-24

jQuery 改变checkbox和radio select的样式

 
jQuery 改变checkbox和radio select的样式
演示
XML/HTML Code
  1. <div class="content">  
  2. <h1>CHECKBOX</h1>  
  3. <h3>Custom Checkbox Styling</h3>  
  4. <!-- Custom Checkbox Styling -->  
  5. <input type="checkbox" class="checkbox" checked />  
  6. <h2>Code</h2>  
  7. <code>$('.checkbox').checkBox();</code>  
  8. <hr/>  
  9. <h1>RADIO</h1>  
  10. <h3>Custom Radio Button Styling</h3>  
  11. <!-- Custom Radio Button Styling -->  
  12. <input type="checkbox" class="checkbox" checked />  
  13. <input type="radio" name="radio" class="radio" value="1" checked/>  
  14. <input type="radio" name="radio" class="radio" value="2" />  
  15. <input type="radio" name="radio" class="radio" value="3" />  
  16. <h2>Code</h2>  
  17. <code>$('.radio').radio();</code>  
  18. <hr/>  
  19. <h1>DROPDOWN</h1>  
  20. <h3>Custom Select Dropdown</h3>  
  21. <!-- Custom Select Dropdown -->  
  22. <select class="select" name="select" tabindex="1">  
  23. <option value="1">Click me and see</option>  
  24. <option value="2">All the cool stuff</option>  
  25. <option value="3">That I can do</option>  
  26. <option value="4">I need a long phrase</option>  
  27. <option value="5">In order to illustrate</option>  
  28. <option value="6">How this element handles</option>  
  29. <option value="7">Different text lengths</option>  
  30. <option value="8">And long options lists</option>  
  31. <option value="9">Because we are grown ups.</option>  
  32. </select>  
  33.  </div>  


原文地址:http://www.freejs.net/article_biaodan_217.html

风飞飘扬

风飞飘扬

相关推荐

Selenium系列之--06 CSS SELECTOR选择器的一些写法

//div#radio>input:nth-of-type 选择id为radio的div下的第4个input节点。//input.Volvo[name=‘identity‘] 选择class为.Volvo并且name为identity的input节点

zhanghaibing00 / 0评论 2020-06-28

纯css radio button样式

<input type="radio" checked onclick="editWareHouseIt(this)" id="editOrInsHouse01". <input ty

MaureenChen / 0评论 2020-05-25

使用CSS修改radio样式

<label> <input class="radio_type" type="radio" />现金</label>

zhanghao / 0评论 2019-12-20

ElementUI radio 小改造

ElementUI 是自己比较钟爱的一套 vue 组件库，自己好几个项目里都在用它。一直以来这些丰富的组件，让我能快速的搞定各种后台管理页面，极大地提高了工作效率。其中一点就是本文要提到的，radio 绑定对象类型值的问题。具体现象就是，当通过 mapSt

lbPro0 / 0评论 2019-11-03

jquery里的attr和prop的用法注意，解决用attr移除checked选中状态失败的方法

$(":radio").removeAttr(‘checked‘); $(":radio").attr(‘checked‘,‘true‘); 实际问题：在使用removeAttr()移除了radio的check

donghongbz / 0评论 2019-10-19

jQuery 绑定事件.bind() 绑定radio值

今天遇到了一个小问题，关于 html 中 radio 值绑定的问题，发现使用 JQuery中的 .bind() 事件 可以更加有效的 达到我需要的功能， 作为笔记记录共享于此，提供给刚入门的新手们参考。--jquery绑定事件，当radio值发生变化时触发

85931235 / 0评论 2012-01-11

jquery radio

// $("#isMainEdN").attr("checked",true);// $("#isMainEdY").attr("checked"

yFifhting / 0评论 2017-06-08

javascript radio值获取代码

//是否选中 radio,默认不选中，radio 可指定 checked="checked" 不受 flag 影响

miyacnn / 0评论 2009-03-17

element ui radio组件添加点击可取消选中状态

this.area = '' //如果点击的对象是area就将v-model的值清空 radio状态为空

一片天空 / 0评论 2019-07-01

SMTC：纯CSS 星星打分评价

星星打分评价的页面功能，需求上经常会碰到。网上搜一下，Js + CSS，纯 CSS 的版本也非常多。觉得搜到的都不理想，下意识觉得应该能有更好的实现自己动手尝试一下，果然能更好用所以开篇文章，分享一下 ^_^. 先来 HTML 代码感受下<!-- 不

NARUTOLUOLUO / 0评论 2019-07-01

用JS和JQuery分别获取表单元素的值(select,checkbox,radio)

废话不多说直接上代码HTML部分<html !<input type="button" value="点击获取下拉列表的值" onclick="getSelectorValue()"&

人心 / 0评论 2019-06-30

总结：如何修改美化radio、checkbox的默认样式

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。给<input>元素设置为透明，然后通过定位让用户看到的是<labe

攻城师 / 0评论 2019-06-29

jquery radio

// $("#isMainEdN").attr("checked",true);// $("#isMainEdY").attr("checked"

HotStrong / 0评论 2017-06-08

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

在使用Javascript编写前台脚本的时候，经常会操作Html控件，比如checkbox、radio、select，用Jquery库操作其他会方便很多，下面用Jq对这些控件的操作进行一个全面的代码总结。根据input类型选择：$等同于文档中的$. 结果返

zfjdoreen / 0评论 2016-04-13

jQuery操作radio、checkbox、select总结

"没有任何单选框被选中" : "已经有选中";jQuery.val(); // 获取一组radio被选中项的值。jQuery.attr; // 设置id=radio2的一项为选中。jQuery.get.checked

89367741 / 0评论 2016-03-30

ionic ion-radio单选按钮效果

<div class="font_12 color_99">hbiao***.yeah.net</div>. <ion-radio ng-model="choice" ng-value=

shiyiboke / 0评论 2016-03-29

JQuery控制Radio

在开发中经常会用到Radio来实现用户的选择效果，我在项目中积累了一些利用JQUERY来操作Radio的方法，在这里分享一下，供有需要的朋友借鉴。

SinhaengHhjian / 0评论 2016-01-25

选择控件：select ，radio，checkbox之用jquery获取选中值的小结

最近是因为用到了checkbox ，需要用jquery获取多选框的选择值。虽然简单，但其实自己还是花了一小点时间的（因为不太熟……顺便捎上了select下拉框，radio单选按钮。下面用小的示例整理下如何获取这些选择控件所选中的值。var index =

89453862 / 0评论 2015-10-10

jquery checkbox radio a div 设置不可用/变灰的方法总结

在网页中进行操作的时候，一个常规动作是在表单中点击按钮，但是经常会出现点了按钮以后没有反应，这个时候，用户通常会连点几次，这个可能破坏你原来的预想，例如会导致多次提交。通过将按钮设置为不可用可以防止这类事情发生，也可以让客户知道已经成功点击了。下面是js和

SinhaengHhjian / 0评论 2015-07-31

Pure CSS content filter

box-shadow: 0 1px 3px rgba, 0 1px 2px rgba;

nicepainkiller / 0评论 2015-06-19

jQuery 获取 radio 选中后的文字

<inputtype="radio"id="male"name="sex"value="1"/>男 <inputtype="radio"

aaalk00 / 0评论 2015-03-31

Jquery主要控件的取值、赋值，包括textbox,button,lable,radio,checkbox,selected

var item = $.val();//若未被选中 则val() = undefined

PHP淮北PHP00网 / 0评论 2015-03-31

jQuery获取Radio选择的Value值:

用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！$.attr;//设置ID为img_1的<img>src的值为'test.jpg'.

xxglh / 0评论 2015-03-24

纯CSS实现radio和checkbox实现效果

reset-radio在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以我们可能会经常引用第三方的模块去实现，或者通过JS等其他方式去hack。这样相对来说增加了代码量不说，还特别复杂，

云端漂移 / 0评论 2019-06-27

JQuery选择器及radio，checkbox,select取值和反选

$选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素。$("*")选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$. $选择所有的label元素的下

87413460 / 0评论 2014-10-30

利用jQuery来简化radio，checkbox，select，radio表单元素的操作

获取一组radio被选中项的值var item = $.val();获取select被选中项的文本var item = $.text();select下拉框的第二个元素为当前选中值$[0].selectedIndex = 1;radio单选组的第二个元素为

82483564 / 0评论 2014-08-28

jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作;

今天写Js的时候发现利用jquery取不到radio的当前值，上网Google下，发现网上的解决方案都是依托于1.2版本的，jquery的1.3版本已经去掉的属性选择器@符号。单选组radio：$.attr;//设置value=2的项目为当前选中项。自然两

xiuping0 / 0评论 2014-08-11

jquery取radio,checkbox的选中值（一组和单个）及理解

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关。文本框，文本区域：$.attr;下拉框select： $.val();或$.val();if //判断是否已经打勾。单选

ruoyiqing / 0评论 2014-03-18

jQuery 判断页面元素是否被选中的几种方法

if //判断是否已经打勾。$.attr;//设置value=-sel3的项目为当前选中项

海欣海夜 / 0评论 2014-01-21

jQuery操作radio、checkbox、select总结

鉴于网上总结的资料排版差、总结混乱、版本陈旧，所以从新总结了一下常用的jQuery操作radio、checkbox、select，所用jQuery版本为 jquery-1.4.2.min.js 。以下，按三种表单元素分别总结：。[xhtml]view pl

86540295 / 0评论 2014-01-04

jQuery操作radio、checbox、select总结

<input type="radio" name="radio" id="radio4" value="4" />4js代码：。"没有任何单选框被选中&q

mapdigit / 0评论 2013-12-10

jQuery操作radio、checkbox、select总结

JQuery处理checkbox选中不选中在各个版本中是不同的。-在jquery1.5及其以下的版本中使用attr方法进行操作；<input type="radio" name="radio" id="

pplxh / 0评论 2013-12-03

Jquery操作<input type="radio">

使用元素选择器，再使用属性过滤器name='city'，最后使用:checked选取被选中的元素。给name="city"而且value="YangZhou"的radio设置选中状态。索引是从0开始的。//obj,当

limengmeng00 / 0评论 2013-09-27

jquery操作radio

$info[property] || $info[property]==0}checked{/if} />公共组件。<input type="radio" onclick="chooseProperty()&quo

88284453 / 0评论 2013-09-09

jquery unrecognized expression: [@type=radio][@checked]

Exception unrecognized expression: [@type=radio][@checked]错误： uncaught exception: Syntax error, unrecognized expression: [@type=

菜鸟新手taob / 0评论 2013-08-16

用JQuery取消radiobutton的选中状态

<input type="radio" name="gender" value="M" />Male<br /><input type="radio&quo

聆听蘭 / 0评论 2013-08-13

jQuery操作<input type="radio">

<input type="radio" name="city" value="SuZhou">苏州1、获取选中的radio的值：。$.val();使用元素选择器，再使用属性过滤器nam

健康学习 / 0评论 2013-07-29

jQuery一句就搞定radio返回值选定的问题

jQuery.attr;一句就搞定，而用平常的。<td class="px10"><input type="radio" name="sex" id="radio&qu

87281248 / 0评论 2013-07-24

如何通过Jquery简单又快速的获取一组radio的取值呢?

var_name = $.val();Jquery 1.3以后的版本var_name = $.val();区别是老版本有个@.

Allenyhy / 0评论 2013-06-13

jQuery操作radio、checkbox、select总结(轉)

Html代码<inputtype="radio"name="radio"id="radio1"value="1"/>1<inputtype="rad

msyndra / 0评论 2013-05-18

超棒的页面checkbox和radio美化jQuery类库 - iCheckbox

iCheckbox是一个超棒的界面美化Javascript类库。主要特性跨浏览器和设备统一的input样式和UI支持触摸设备 - iOS，android，blackberry，windows phone支持键盘控制 - Tab，空格，方向键和其它快捷方式完

momode / 0评论 2013-04-29

jQuery操作<input type="radio">

<input type="radio" name="city" value="SuZhou">苏州1、获取选中的radio的值：。$.val(); 使用元素选择器，再使用属性过滤器na

82483564 / 0评论 2013-04-28

jQuery获取Select option 选择的Text和Value

jqueryradio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置。获取一组radio被选中项的值:varitem=$.val();获取select被选中项的文本:varitem=$.t

88463368 / 0评论 2013-04-24

jQuery 使用小结

$selector.parent 仅限于直接父类元素 parent$.parents 只要是父类元素即可，能向父级多级查找 parents选择子类元素。$ele.children;$this.siblings.find选择兄弟元素 $selector.pa

堇年 / 0评论 2019-06-21

JQuery 控制 radio 只读

有一种场景是：让没有选中的radio不可以修改。

89387341 / 0评论 2013-03-19

jQuery操作radio、checkbox、select总结

Html代码<inputtype="radio"name="radio"id="radio1"value="1"/>1<inputtype="rad

honeyth / 0评论 2013-03-18

jquery <s:radio 单选扭添加change事件

<s:radio cssClass="test" id="test" name="test.test" list="#{0:'女',1:'男'}" listKey=&qu

zhangmingming / 0评论 2013-03-10

jquery radio/checkbox change事件不能触发的问题

<input type="radio" id="insuranceType" name="insuranceType" value="0"/>机动车。</ht

杉林的HelloWord / 0评论 2013-03-09

JQuery对radio的操作

一、根据值选择单选框的操作：

delmarks / 0评论 2013-03-01