明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

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

發(fā)表時間：2023-09-19 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)韱芜x和多選按鈕如何給圖片加樣式，單選和多選按鈕給圖片加樣式的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。之前一直看到有人在問，單選按鈕和多選按鈕怎么加樣式、怎么把按鈕變大？下面把我做的一個例子分享出來代碼如下:<!DOCTYPE HTML> <html> ...
這次給大家?guī)韱芜x和多選按鈕如何給圖片加樣式，單選和多選按鈕給圖片加樣式的注意事項有哪些，下面就是實戰(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)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

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

a標簽如何使用href屬性與onclick事件

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

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

以上就是單選和多選按鈕如何給圖片加樣式的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。