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

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:26:35

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

單選和多選按鈕如何給圖片加樣式:這次給大家?guī)韱芜x和多選按鈕如何給圖片加樣式，單選和多選按鈕給圖片加樣式的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。之前一直看到有人在問，單選按鈕和多選按鈕怎么加樣式、怎么把按鈕變大？下面把我做的一個例子分享出來代碼如下:<!DOCT

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀單選和多選按鈕如何給圖片加樣式:這次給大家?guī)韱芜x和多選按鈕如何給圖片加樣式，單選和多選按鈕給圖片加樣式的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。之前一直看到有人在問，單選按鈕和多選按鈕怎么加樣式、怎么把按鈕變大？下面把我做的一個例子分享出來代碼如下:<!DOCT

這次給大家?guī)韱芜x和多選按鈕如何給圖片加樣式，單選和多選按鈕給圖片加樣式的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

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

代碼如下:

<!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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html怎么實(shí)現(xiàn)可輸入的下拉菜單

a標(biāo)簽如何使用href屬性與onclick事件

css3的新單位vw、vh、vmin、vmax應(yīng)該如何使用

CSS的經(jīng)典三欄布局如何實(shí)現(xiàn)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com