單選和多選按鈕如何為圖片加樣式-html教學-PHP中文網

首頁

web前端

html教學

單選和多選按鈕如何為圖片加樣式

php中世界最好的语言

Feb 01, 2018 am 09:52 AM

圖片如何樣式

這次為大家帶來單選和多選按鈕如何為圖片加樣式，單選和多選按鈕給圖片加樣式的注意事項有哪些，下面就是實戰案例，一起來看一下。

之前一直看到有人在問，單選按鈕和多選按鈕怎麼加樣式、怎麼把按鈕變大？下面把我做的一個例子分享出來

代碼如下:

<!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=&#39;checkbox&#39;]").click(function(){ 
if($(this).is(&#39;:checked&#39;)){ 
$(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=&#39;radio&#39;]").click(function(){ 
$("input[type=&#39;radio&#39;]").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中文網其它相關文章！