這次為大家帶來單選和多選按鈕如何為圖片加樣式,單選和多選按鈕給圖片加樣式的注意事項有哪些,下面就是實戰案例,一起來看一下。
之前一直看到有人在問,單選按鈕和多選按鈕怎麼加樣式、怎麼把按鈕變大?下面把我做的一個例子分享出來
代碼如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="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>
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是單選和多選按鈕如何為圖片加樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!