用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 相关文章推荐
广告显示判断
Aug 31 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
理解javascript中的with关键字
Feb 15 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
javascript中join方法实例讲解
Feb 21 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP脚本数据库功能详解(中)
2006/10/09 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
JavaScript Canvas实现验证码
2020/08/02 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
狼和鹿教学反思
2014/02/05 职场文书
初中班主任寄语
2014/04/04 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
爱我中华教学反思
2014/04/28 职场文书
店面出租协议书范本
2014/11/28 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
婚礼领导致辞大全
2015/07/28 职场文书