Heim > Artikel > Web-Frontend > So bedienen Sie Kontrollkästchen in HTML-Seiten
So bedienen Sie Kontrollkästchen in HTML-Seiten
- 高洛峰Original
- 2017-02-09 17:50:001908Durchsuche
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, 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 unser Kontrollkästchen durch Bilder ersetzen, um einen cooleren und atemberaubenderen Effekt zu erzielen Hier verwende ich vollständig die CSS3-Schreibmethode, es ist 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 wird Ihnen vom Herausgeber vorgestellt. Ich hoffe, dass diese Arbeitsweise funktioniert Das Kontrollkästchen auf der HTML-Seite wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!
Weitere verwandte Artikel zur Bedienung von Kontrollkästchen in HTML-Seiten finden Sie auf der chinesischen PHP-Website!