Comment ajouter des styles aux images pour les boutons radio et à sélection multiple-tutoriel HTML-php.cn

Comment ajouter des styles aux images pour les boutons radio et à sélection multiple

php中世界最好的语言

Libérer： 2018-02-01 09:52:12

original

2771 Les gens l'ont consulté

Cette fois, je vais vous montrer comment ajouter des styles aux images avec des boutons de sélection radio et de sélection multiple. Quelles sont les précautions pour ajouter des styles aux images avec des boutons de sélection radio et de sélection multiple. Voici des cas pratiques. Jetons un coup d'oeil.

J'ai déjà vu des gens demander : Comment ajouter des styles aux boutons radio et aux boutons à sélection multiple, et comment agrandir les boutons ? Permettez-moi de partager un exemple que j'ai fait.

Le code est le suivant :

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture connexe :

Comment implémenter un menu déroulant de saisie en HTML

Comment utiliser l'attribut href et événement onclick dans une balise

Comment utiliser les nouvelles unités vw, vh, vmin, vmax de css3

Comment implémenter la disposition classique à trois colonnes de CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!