- 浏览: 25646 次
- 性别:
- 来自: 北京
文章分类
最新评论
<form name="reg" onsubmit="return checkform(this);"> 请选择你的性别: <div id="male"> <input type="radio" id="sex_male" checked="checked" name="sex" value="male" /> <label name="sex_male" class="checked" for="sex_male">男</label> <input type="radio" id="sex_female" name="sex" value="female" /> <label name="sex_female" for="sex_female">女</label> <input type="radio" id="sex_nomale" name="sex" value="nomale" /> <label name="sex_nomale" for="sex_nomale">人妖</label> </div> <input type="submit" name="Submit" value="提交" id="Submit" /> </form>
body{ font-size:12px; font-family:'宋体'; } #sex_male,#sex_femal,#sex_nomale{ display:none } label{ /*display:-moz-inline-block;*/ display:inline-block; cursor:pointer; margin:5px 0; padding-left:20px; line-height:15px; background:url(2.gif) no-repeat left top; } label.checked{ background-position:left bottom; }
window.onload = function() { labels = document.getElementById('male').getElementsByTagName('label'); radios = document.getElementById('male').getElementsByTagName('input'); for(i=0,j=labels.length ; i<j ; i++) { labels[i].onclick=function() { if(this.className == '') { for(k=0,l=labels.length ; k<l ; k++) { labels[k].className=''; radios[k].checked = false; } this.className='checked'; try{ document.getElementById(this.name).checked = true; } catch (e) {} } } } } /*以下是点击提交按钮时,弹出的框,如果不需要,可直接删除 */ var male_obj = {'male':'男', 'female':'女','nomale':'人妖'}; function checkform(obj) { for (i = 0; i < obj.sex.length; i++) { if (obj.sex[i].checked) { alert(male_obj[obj.sex[i].value]); break; } } return false; }
所用到得图
最终图:
来源:http://www.geekso.com/radio/
发表评论
-
录屏软件
2015-09-14 15:31 01、LICEcap 这个录屏软件已用过,比较好用, 最后 ... -
switch 语句
2015-07-23 15:01 441switch 语句是 if 语句的兄弟语句。 一、 if ( ... -
常用编辑器
2015-06-19 10:52 0dw eclipse Sublime Brackets W ... -
sublime text3 安装及快捷键--ruby环境安装
2015-06-18 16:46 0安装插件:http://www.cnblogs.com/Ris ... -
远程关机
2014-10-31 16:15 0若要关闭远程访问的计算机,可按Alt+F4调出 注销 关机 ... -
向上/向下 取整
2014-10-15 15:58 5961.丢弃小数部分,保留整数部分 parseInt(5/2) ... -
jquery获取焦点后光标在字符串后
2014-09-27 18:05 0jquery获取焦点后光标在字符串后,当input获得焦点后, ... -
解除绑定
2014-09-27 17:44 0$(this).unbind("click" ... -
sass 学习
2014-08-21 17:11 0学习sass: http://www.w3cplus.com ... -
sublime 安装插件
2014-08-21 17:11 01、首先下载sublime(可以在360管家中直接下载)。-- ... -
sass 考拉的安装
2014-08-21 15:57 0安装环境:http://www.w3cplus.com/sas ... -
轻量级图形报表工具JSCharts (JSChart),内置函数中文参考
2014-08-19 16:55 0JSChart是一个轻量级的在 ... -
AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
2014-07-29 17:28 3691、什么是 AJAX ? AJAX = 异步 JavaScr ... -
各种小例子
2014-06-06 17:15 4711、加载页面后,直接跳转到想要的位置。 jQuery.fn ... -
网页在线验证工具
2014-06-06 15:54 0网页在线验证工具(W3C国际标准验证) 免费在线检测你的网 ... -
通配符*的使用
2014-02-18 11:03 302css 通配符 "*" 可以消除浏览器的默 ... -
添加到收藏夹
2013-11-25 15:51 362支持火狐和ie <script type="t ... -
ie中改变滚动条的样式(overflow-y:auto)
2013-10-14 18:07 2894首先写一个div,设置宽 ... -
css自动换行 ie6 css强制换行 white-space:nowrap
2013-10-13 10:27 428网页中有这样的需求,外层宽度固定了,内层每个li宽度不定,依靠 ... -
如何使浮动的元素居中
2013-09-05 17:43 922<div class="content ...
相关推荐
jQuery美化radio和checkbox jQuery美化radio和checkbox jQuery美化radio和checkbox jQuery美化radio和checkbox
使用纯CSS代码实现radio以及checkbox的美化工作。附参考实例,可以根据具体情况进行进一步的修改,灵活多变。
基于jquery HTML5 CheckBox Radio按钮美化特效,演示了不一样的checkbox和Radiobox,加入了点击动画效果,鼠标点击后选中状态也是与默认的风格不一样,如截图所示的为本款效果,更多详情细节请下载本示例自己测试...
10套美化的radio和checkbox组件。多重风格,多种特点。
radio 单选复选框美化
利用Jquery实现的自定义美化radio与checkbox,好东西赶紧下的额。
通过纯CSS3美化修改input 单选[radio]和多选[checkbox]样式
又一款漂亮的带动画效果的CSS3 checkbox复选框、radio单选按钮特效,鼠标点击那些按钮时,会有动画效果,而且一改默认单选框和复选框的呆板样式,将里面的对勾和小点换成了其它的自定义图案,比原来的漂亮多了。
美化了checkbox radio,更加美观,有需求需要的同志欢迎下载哦!~
MFC控件的美化 包括,Button、List、Radio、Combox...等
一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html
WEB网页radio按钮美化仿开关效果二合一 1.利用jQuery技术支持,点击开启/关闭平滑切换 2.适用于PC端网页或手机端网页表单美化应用 3.实用性强,适合网页前端设计师使用 4.资源提供CSDN供下载,用于学习和交流或商用...
、根据原有的select 模拟生成新的 select。 2、支持键盘,可通过键盘选择选项。 3、可自定义样式。 4、方便灵活,可选择需要的seletc 进行模拟(非全局模拟) 5、判断用户是否开启脚本支持,若未开启,不进行...
项目中常用的radio美化代码,兼容,radio美化代码
checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式,你可以生成基于bootstrap,或字体图标,或图片的Checkbox和Radio美化样式。
此代码采用css3实现自定义的radio样式,可用于移动端。
该工程使用按钮类对按钮控件进行美化,涉及到多种美化方法,实现界面按钮的透明显示,添加界面背景图片和文字,使界面看起来很美观!自己做的工程,肯定能用。
pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。
hcheckbox,Checkbox,radio,复选框和单选框美化jQuery版,朋友们先看看效果图,将呆板的单选框和复选框变成各种颜色风格的漂亮按钮,发光效果,jQuery用来实现这么简单的东西,你是不是会认为有点大材小用呢?...
为你的radio输入提供微小的CSS3动画