<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>按钮测试</title> <style type="text/css"> body { font-size:12px; font-family:'宋体'; } #sex_male , #sex_female , #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(1.gif) no-repeat left top; } label.checked { background-position:left bottom; } </style> <script type="text/javascript"> window.onload = function() { labels = document.getElementById('rd').getElementsByTagName('label'); radios = document.getElementById('rd').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':'A', 'female':'B','nomale':'C'}; 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; } </script> </head> <body> <form name="reg" onsubmit="return checkform(this);"> <table border="0"> <tr> <td width="200" id="rd"> <input type="radio" id="sex_male" checked="checked" name="sex" value="male" /><label name="sex_male" class="checked" for="sex_male">A</label> <input type="radio" id="sex_female" name="sex" value="female" /><label name="sex_female" for="sex_female">B</label> <input type="radio" id="sex_nomale" name="sex" value="nomale" /><label name="sex_nomale" for="sex_nomale">C</label></td> </tr> <tr> <td> <input type="submit" name="Submit" value="测试选项" id="Submit" /></td> </tr> </table> </form> </body> </html>
相关推荐
纯css3勾选美化单选按钮样式 纯css3勾选美化单选按钮样式
在Android中用CheckBox+LinearLayout来实现一种多行单选按钮组的效果。效果图及讲解见:https://blog.csdn.net/ahuyangdong/article/details/82691961。github源码:https://github.com/ahuyangdong/SelectCustom
手机端按钮样式,单选复选框样式,大按钮
jQuery表单单选按钮美化制作滑动式单选按钮选择样式美化
更改默认的样式,还有就是火狐下显示正常,是个例子
5款CSS3选项框单选按钮样式.rar
纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码
单选复选按钮图标html5按钮样式
Swift单选横竖样式Demo
C#280美化单选按钮和复选按钮 源代码
几个风格好看的CSS3单选复选按钮美化样式,简单的表单单选框、复选框美化代码。
纯css3单选按钮和复选按钮样式代码 纯css3单选按钮和复选按钮样式代码
好看的CSS3选项框单选按钮样式
只需要2个按钮就可以实现单选按钮,超级简单的,超级简单的哦
android 自定义 单选按钮 radioButton
这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。
jquery.icheck.js复选框样式和单选按钮样式代码
jQuery单选多选按钮样式美化代码jquery.1.10.2.min.js,有删除功能,按钮类型有圆心、圆钩、方心、方钩。