用jquery与css打造个性化的单选框和复选框


Posted in Javascript onOctober 20, 2010

用jquery与css打造个性化的单选框和复选框
上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个。供大家鉴赏!
话不多说,直接上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>打造个性化的单选框和复选框</title> 
<style type="text/css"> 
* 
{ 
margin: 0; 
padding: 0; 
font-size: 12px; 
} 
.formt 
{ 
width: 400px; 
margin: 10px auto; 
border: 1px solid #ccc; 
height: 200px; 
padding: 10px; 
} 
.unselected 
{ 
background-image: url(rdo_off.png); 
} 
.selected 
{ 
background-image: url(rdo_on.png); 
} 
.unchecked 
{ 
background-image: url(chk_off.png); 
} 
.checked 
{ 
background-image: url(chk_on.png); 
} 
.f_checkbox, .f_radio 
{ 
background-position: 3px center; 
background-repeat: no-repeat; 
cursor: pointer; 
display: block; 
height: 16px; 
line-height: 120%; 
padding: 4px 24px; 
} 
.formt input 
{ 
left: -9999px; 
position: absolute; 
} 
.addcolor 
{ 
color: Red; 
} 
</style> 
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script> 
<script type="text/javascript"> 
$( 
function () { 
//单选 
$(".f_radio").click( 
function () { 
$(this).addClass("selected").removeClass("unselected").siblings(".selected").removeClass("selected").addClass("unselected"); 
} 
); 
//复选 
$(".f_checkbox").toggle( 
function () { 
$(this).addClass("checked"); 
$(this).children("input").attr("checked", "checked"); 
}, 
function () { 
$(this).removeClass("checked"); 
$(this).children("input").removeAttr("checked"); 
} 
); 
} 
); 
</script> 
</head> 
<body> 
<div class="formt"> 
<label class="f_radio unselected"> 
<input type='radio' name="height" value="dwarf" /> 
网上办税标准版</label> 
<label class="f_radio unselected"> 
<input type="radio" name="height" value="average" /> 
网上报税专业版</label> 
<label class="f_radio unselected"> 
<input type="radio" name="height" value="giant" /> 
其他</label> 
<hr /> 
<label class="f_checkbox unchecked"> 
<input type="checkbox" name="newsletter" value="c" id="c" /> 
发票认证</label> 
<label class="f_checkbox unchecked"> 
<input type="checkbox" name="newsletter" value="d" id="d" /> 
涉税认证</label> 
</div> 
<label for="male"> 
Male</label> 
<input type="checkbox" name="sex" id="male" /> 
</body> 
</html>

图片大家可以自己截图。
Javascript 相关文章推荐
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
Jquery插件之多图片异步上传
Oct 20 #Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 #Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 #Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 #Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 #Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 #Javascript
理解Javascript_12_执行模型浅析
Oct 18 #Javascript
You might like
PHP源码之explode使用说明
2011/08/05 PHP
PHP中使用BigMap实例
2015/03/30 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python发送邮件测试报告操作实例详解
2018/12/08 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python实现微信打飞机游戏
2020/03/24 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
合同专员岗位职责
2013/12/18 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
mysql函数全面总结
2021/11/11 MySQL