之前一直看到有人在问,单选按钮和多选按钮怎么加样式、怎么把按钮变大?下面把我做的一个例子分享出来。 1.首先把按钮做成图片 2.html页面 复制代码代码如下: <br />$(function(){ <br />$("input[type='checkbox']").click(function(){ <br />if($(this).is(':checked')){ <br />$(this).attr("checked","checked"); <br />$(this).parent().removeClass("c_off").addClass("c_on"); <br />}else{ <br />$(this).removeAttr("checked"); <br />$(this).parent().removeClass("c_on").addClass(" c_off"); <br />} <br />}); <br />$("input[type='radio']").click(function(){ <br />$("input[type='radio']").removeAttr("checked"); <br />$(this).attr("checked","checked"); <br />$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off"); <br />}); <br />}); <br /> <br />/* 多选/单选 */ <br />label { <br />display: block; <br />cursor: pointer; <br />line-height: 26px; <br />margin-bottom: 20px; <br />width: 26px; <br />height: 26px; <br />line-height: 26px; <br />float: left; <br />margin-top: 6px; <br />} <br />.radios { <br />padding-top: 18px; <br />border-top: 1px solid #049CDB; <br />} <br />.label_check input, .label_radio input { <br />margin-right: 5px; <br />} <br />.lblby .label_check, .lblby .label_radio { <br />margin-right: 8px; <br />} <br />.lblby .label_radio, .lblby .label_check { <br />background: url(../images/jxc_btn.png) no-repeat; <br />} <br />.lblby .label_check { <br />background-position: 0 0px <br />} <br />.lblby label.c_on { <br />background-position: 0 -26px; <br />} <br />.lblby .label_radio { <br />background-position: 0 -52px; <br />} <br />.lblby label.r_on { <br />background-position: 0 -78px; <br />} <br />.lblby .label_check input, .lblby .label_radio input { <br />position: absolute; <br />left: -9999px; <br />} <br /> Checkbox1 Checkbox2 Radio1 Radio2 Radio3