用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 私有成员分析
Jan 13 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript操作文本框readOnly
2007/05/15 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python WSGI的深入理解
2018/08/01 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
python中安装django模块的方法
2020/03/12 Python
python tqdm库的使用
2020/11/30 Python
消防标语大全
2014/06/07 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2014年法务工作总结
2014/12/11 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
装修安全责任协议书
2016/03/22 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
SQL CASE 表达式的具体使用
2022/03/21 SQL Server