Heim > Artikel > Web-Frontend > So fügen Sie Bildern Stile für Radio- und Mehrfachauswahlschaltflächen hinzu
So fügen Sie Bildern Stile für Radio- und Mehrfachauswahlschaltflächen hinzu
- php中世界最好的语言Original
- 2018-02-01 09:52:122764Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie Stile zu Bildern mit Options- und Mehrfachauswahlschaltflächen hinzufügen. Welche Vorsichtsmaßnahmen gibt es beim Hinzufügen von Stilen zu Bildern mit Options- und Mehrfachauswahlschaltflächen? Hier sind praktische Fälle.
Ich habe schon Leute gefragt: Wie füge ich Optionsfeldern und Mehrfachauswahlschaltflächen Stile hinzu und wie vergrößere ich die Schaltflächen? Lassen Sie mich ein Beispiel teilen, das ich erstellt habe.
Der Code lautet wie folgt:
<!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>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben Weitere verwandte Artikel auf der chinesischen PHP-Website!
Verwandte Lektüre:
So implementieren Sie ein Eingabe-Dropdown-Menü in HTML
So verwenden Sie das href-Attribut und onclick-Ereignis in einem Tag
So verwenden Sie die neuen Einheiten vw, vh, vmin, vmax von CSS3
Anleitung Implementieren Sie das klassische dreispaltige Layout von CSS
Das obige ist der detaillierte Inhalt vonSo fügen Sie Bildern Stile für Radio- und Mehrfachauswahlschaltflächen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!