用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_11_constructor实现原理

constructor是什么简单的理解,constructor指的就是对象的构造函数。请看如下示例：复制代码代码如下: function Foo(){}; var foo = new Foo(); alert(foo.constructor);//Foo alert(Foo.constructor);//Functio>>>详细阅读

本文标题：用jquery与css打造个性化的单选框和复选框

地址：http://www.17bianji.com/kaifa2/JS/25602.html

1/2 1