Posted in Javascript onOctober 20, 2010
上图是经过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>
图片大家可以自己截图。
用jquery与css打造个性化的单选框和复选框
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@