用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的面向对象方法以及差别
Mar 31 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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读取目录树的实现方法分析
2019/03/22 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python打开网页和暂停实例
2014/09/30 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Python 支持向量机分类器的实现
2020/01/15 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
寒假实习自荐信
2014/01/26 职场文书
2014庆六一活动方案
2014/03/02 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
小学班主任寄语大全
2014/04/04 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏