checkbox、radio样式（用图片换掉默认样式）
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //checkbox radio 事件委派 $(document).on('click', 'input', function(e) { var $_this = $(e.target); if($_this.is(':checkbox')){ if ($_this.is(":checked") && $_this.parent(document).is('.checkbox')) { $_this.parent(".checkbox").addClass("checked"); } else { $_this.parent(".checkbox").removeClass("checked"); } } //radio if($_this.is(':radio') && $_this.parent(document).is('.checkbox')){ $(".checkbox input[name=" + $_this.attr("name") + "]").each(function(index, element) { if ($(element).is(":checked")) { $(element).parent(".checkbox").addClass("checked"); } else { $(element).parent(".checkbox").removeClass("checked"); } }); } }); }); </script> <style type="text/css"> input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline;} .checkbox { display: inline-block; width: 15px; height: 15px; position: relative; background-color: #FFF; vertical-align: middle; overflow: hidden; cursor:pointer; background: url(img/icon.png) no-repeat; background-position:0 -80px; } .checkbox input { font-size: 50px; padding: 0; float: left; width: 100px; height: 100px; display: block; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .checkbox.checked {background-position:0 -40px;} </style> </head> <body> <form> <span class="checkbox"><input name="food" type="radio" value="0" /></span>米饭 <span class="checkbox"><input name="food" type="radio" value="10" /></span>馒头 <span class="checkbox checked"><input name="food" type="radio" value="40" checked="checked"/></span>面包 <hr> <span class="checkbox"><input name="fruit" type="checkbox" value="苹果" /></span>苹果 <span class="checkbox checked"><input name="fruit" type="checkbox" value="橘子" checked="checked"/></span>橘子 <span class="checkbox checked"><input name="fruit" type="checkbox" value="葡萄" checked="checked"/></span>葡萄 <span class="checkbox"><input name="fruit" type="checkbox" value="木瓜" /></span>木瓜 <span class="checkbox"><input name="fruit" type="checkbox" value="菠萝" /></span>菠萝 </form> </body> </html>