用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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
常用jQuery代码分享
Jul 14 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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 sprintf()函数用例解析
2011/05/18 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP培训要多少钱
2017/06/06 PHP
php获取微信openid方法总结
2019/10/10 PHP
动态添加js事件实现代码
2009/03/12 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Vue实现日历小插件
2019/06/26 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
办公室副主任岗位职责
2013/11/25 职场文书
上课说话检讨书大全
2014/01/22 职场文书
实习单位评语
2014/04/26 职场文书
个人求职信范文
2014/05/24 职场文书
电教室标语
2014/06/20 职场文书
公司年夜饭通知
2015/04/25 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python