Maison > Article > interface Web > Comment ajouter des styles aux images pour les boutons radio et à sélection multiple
Comment ajouter des styles aux images pour les boutons radio et à sélection multiple
- php中世界最好的语言original
- 2018-02-01 09:52:122783parcourir
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='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>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!