Heim > Artikel > Web-Frontend > So verwenden Sie Kontrollkästchen in HTML-Seiten
So verwenden Sie Kontrollkästchen in HTML-Seiten
- 高洛峰Original
- 2017-03-11 11:50:153133Durchsuche
Kontrollkästchen sind auf Webseiten sehr verbreitet, egal ob es sich um eine E-Commerce-Website oder eine Plattform handelt, überall dort, wo eine Auswahl erforderlich ist, werden Sie Kontrollkästchen sehen. Als nächstes gibt es zwei kleine Demos, die ich zuvor geschrieben habe. Die spezifischen Codes werden auf der Script Home-Plattform als Referenz bereitgestellt.
Kontrollkästchen sind auf Webseiten sehr verbreitet Auf einer E-Commerce-Website oder einer Plattform werden überall dort Kontrollkästchen angezeigt, wo Sie eine Auswahl treffen müssen. Als nächstes gibt es zwei kleine Demos, die ich zuvor geschrieben habe, beide über Kontrollkästchen. Ich hoffe, sie werden für alle hilfreich sein.
Beim ersten geht es um das Auswählen aller Kontrollkästchen und das Umkehren der Auswahl. Natürlich habe ich auch eine kleine Funktion hinzugefügt, nämlich wenn die Kontrollkästchen zum Auswählen von Shangpin oder anderen Dingen unten sind Dann wird auch die Schaltfläche „Alles auswählen“ ausgewählt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
border: 1px solid black;
text-align: center;
}
table{
border: 1px solid black;
}
#opp{
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px style #eee;
outline-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td><input id="all" type="checkbox">全选</td>
<td width="300px">复选框全选示例</td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input id="opp" type="button">反选</td>
<td></td>
</tr>
</table>
<script>
var vll = document.getElementById("all");
var vlist=document.getElementsByClassName("list");
var vopp=document.getElementById("opp");
vll.onclick=function(){
for(var i=0;i<vlist.length;i++){
vlist[i].checked=vll.checked;
}
}
for( var i=0;i<vlist.length;i++){
vlist[i].onclick=function(){
if(this.checked==false){
vll.checked=false;
}
else{
for(var i2=0;i2<vlist.length;i2++){
if(vlist[i2].checked==false){
break;
}
if(i2>=vlist.length-1){
vll.checked=true;
}
}
}
}
}
vopp.onclick=function(){
for(var i=0;i<vlist.length;i++){
vlist[i].checked=!vlist[i].checked;
if(vlist[i].checked==false){
vll.checked=false;
}
}
}
</script>
</body>
</html>Die zweite Möglichkeit besteht darin, den Kontrollkästchenstil anzupassen, das heißt, wir können unsere Kontrollkästchen durch Bilder ersetzen, um einen coolen Effekt hinzuzufügen. Und hier verwende ich ihn vollständig CSS3-Schreibmethode, kein JavaScript beteiligt;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 1000px;
height: 50px;
position: relative;
}
input{
width: 50px;
height: 50px;
opacity: 1;
display: none;
}
input+label{
display: block;
width: 50px;
height: 50px;
background: url(img/2.png);
background-size: 100%;
}
input:checked+label{
background: url(img/1.PNG);
background-size: 100%;
}
</style>
</head>
<body>
<p class="box1">
<input type="checkbox" name="" id="input1" value="" />
<label for="input1"></label>
</p>
<p class="box2">
<input type="checkbox" name="" id="input2" value="" />
<label for="input2"></label>
</p>
<p class="box3">
<input type="checkbox" name="" id="input3" value="" />
<label for="input3"></label>
</p>
</body>
</html>Das Obige ist das Kontrollkästchen auf der HTML-Seite, das Ihnen der Editor vorstellt. Die Operationsmethode, ich hoffe es Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der Script House-Website bedanken!
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Kontrollkästchen in HTML-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!