<img src="http://files.jb51.net/upload/201010/20101020104517944.gif" border="0" alt="用jquery与css打造个性化的单选框和复选框_jquery" ><br>上图是经过css和jquery美化后的效果，怎么样呢？是不是很爽啊！这个是我从另一个脚本库看到的一个效果，觉得挺不错的，然后就用jquery自己实现了一个。供大家鉴赏！ <br>话不多说，直接上代码： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="20411" class="copybut" id="copybut20411" onclick="doCopy('code20411')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code20411"> <br> <br> <br> <br><title>打造个性化的单选框和复选框</title> <br><style type="text/css"> <BR>* <BR>{ <BR>margin: 0; <BR>padding: 0; <BR>font-size: 12px; <BR>} <BR>.formt <BR>{ <BR>width: 400px; <BR>margin: 10px auto; <BR>border: 1px solid #ccc; <BR>height: 200px; <BR>padding: 10px; <BR>} <BR>.unselected <BR>{ <BR>background-image: url(rdo_off.png); <BR>} <BR>.selected <BR>{ <BR>background-image: url(rdo_on.png); <BR>} <BR>.unchecked <BR>{ <BR>background-image: url(chk_off.png); <BR>} <BR>.checked <BR>{ <BR>background-image: url(chk_on.png); <BR>} <BR>.f_checkbox, .f_radio <BR>{ <BR>background-position: 3px center; <BR>background-repeat: no-repeat; <BR>cursor: pointer; <BR>display: block; <BR>height: 16px; <BR>line-height: 120%; <BR>padding: 4px 24px; <BR>} <BR>.formt input <BR>{ <BR>left: -9999px; <BR>position: absolute; <BR>} <BR>.addcolor <BR>{ <BR>color: Red; <BR>} <BR></style> <br><script type="text/javascript" src="jquery-1.4.2.min.js"> </script> <br><script type="text/javascript"> <BR>$( <BR>function () { <BR>//单选 <BR>$(".f_radio").click( <BR>function () { <BR>$(this).addClass("selected").removeClass("unselected").siblings(".selected").removeClass("selected").addClass("unselected"); <BR>} <BR>); <BR>//复选 <BR>$(".f_checkbox").toggle( <BR>function () { <BR>$(this).addClass("checked"); <BR>$(this).children("input").attr("checked", "checked"); <BR>}, <BR>function () { <BR>$(this).removeClass("checked"); <BR>$(this).children("input").removeAttr("checked"); <BR>} <BR>); <BR>} <BR>); <BR></script> <br> <br> <br><div class="formt"> <br><label class="f_radio unselected"> <br><input type="radio" name="height" value="dwarf"> <br>网上办税标准版</label> <br><label class="f_radio unselected"> <br><input type="radio" name="height" value="average"> <br>网上报税专业版</label> <br><label class="f_radio unselected"> <br><input type="radio" name="height" value="giant"> <br>其他</label> <br><hr> <br><label class="f_checkbox unchecked"> <br><input type="checkbox" name="newsletter" value="c" id="c"> <br>发票认证</label> <br><label class="f_checkbox unchecked"> <br><input type="checkbox" name="newsletter" value="d" id="d"> <br>涉税认证</label> <br> </div> <br><label for="male"> <br>Male</label> <br><input type="checkbox" name="sex" id="male"> <br> <br> <br> </div> <br>图片大家可以自己截图。
