今天小编跟大家讲解下有关单选按钮、多选按钮用图片实现加样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关单选按钮、多选按钮用图片实现加样式 的相关资料，希望小伙伴们看了有所帮助。
之前一直看到有人在问 单选按钮和多选按钮怎么加样式、怎么把按钮变大 下面把我做的一个例子分享出来。 1.首先把按钮做成图片 2.html页面 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <script type="text/javascript"src="https://www.aidi.net.cn//web/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function(){ $("input[type='checkbox']").click(function(){ if($(this).is(':checked')){ $(this).attr("checked","checked"); $(this).parent().removeClass("c_off").addClass("c_on"); }else{ $(this).removeAttr("checked"); $(this).parent().removeClass("c_on").addClass("c_off"); } }); $("input[type='radio']").click(function(){ $("input[type='radio']").removeAttr("checked"); $(this).attr("checked","checked"); $(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off"); }); }); </script> </head> <style> label { display: block; cursor: pointer; line-height: 26px; margin-bottom: 20px; width: 26px; height: 26px; line-height: 26px; float: left; margin-top: 6px; } .radios { padding-top: 18px; border-top: 1px solid #049CDB; } .label_check input, .label_radio input { margin-right: 5px; } .lblby .label_check, .lblby .label_radio { margin-right: 8px; } .lblby .label_radio, .lblby .label_check { background: url(../images/jxc_btn.png) no-repeat; } .lblby .label_check { background-position: 0 0px } .lblby label.c_on { background-position: 0 -26px; } .lblby .label_radio { background-position: 0 -52px; } .lblby label.r_on { background-position: 0 -78px; } .lblby .label_check input, .lblby .label_radio input { position: absolute; left: -9999px; } </style> <body class="lblby"> <label for="checkbox-01"class="label_check c_on"> <input type="checkbox"checked="checked"value="1"id="checkbox-01"name="sample-checkbox-01"/> Checkbox1 </label> <label for="checkbox-02"class="label_check"> <input type="checkbox"value="1"id="checkbox-02"name="sample-checkbox-02"/> Checkbox2</label> <label for="radio-01"class="label_radio r_on"> <input type="radio"value="1"checked="checked"id="radio-01"name="sample-radio"/> Radio1 </label> <label for="radio-02"class="label_radio r_off"> <input type="radio"value="1"id="radio-02"name="sample-radio"/> Radio2 </label> <label for="radio-03"class="label_radio r_off"> <input type="radio"value="1"id="radio-03"name="sample-radio"/> Radio3 </label> </body> </html>来源：爱蒂网
