So bedienen Sie das Kontrollkästchen auf einer HTML-Seite
|
Kontrollkästchen sind auf Webseiten sehr verbreitet. Egal, ob es sich um eine E-Commerce-Website oder eine Plattform handelt, Sie werden Kontrollkästchen überall dort sehen, wo eine Auswahl getroffen werden muss. Als Nächstes sind hier zwei kleine Demos, die ich zuvor geschrieben habe, beide über Kontrollkästchen. Ich hoffe, sie werden Ihnen hilfreich sein. Der erste Teil beschäftigt sich mit dem Aktivieren und Deaktivieren aller Kontrollkästchen. Natürlich habe ich auch eine kleine Funktion hinzugefügt, die besagt, dass, wenn alle Kontrollkästchen der ausgewählten Produkte oder anderer Dinge darunter aktiviert sind, auch die Schaltfläche „Alle auswählen“ aktiviert wird; und umgekehrt. <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
td{
Rand: 1px tief schwarz;
Textausrichtung: zentriert;
}
Tisch{
Rand: 1px tief schwarz;
}
#opp{
Randradius: 50 %;
Breite: 20px;
Höhe: 20px;
Rand: 1px Stil #eee;
Gliederungsstil: keiner;
}
</Stil>
</Kopf>
<Text>
<Tabelle>
<tr>
<td><input id="all" type="checkbox">Alles auswählen</td>
<td width="300px">Beispiel für Kontrollkästchen „Alles auswählen“</td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input id="opp" type="button">Auswahl umkehren</td>
<td></td>
</tr>
</Tabelle>
<Skript>
var vll = document.getElementById("alle");
var vlist = document.getElementsByClassName("Liste");
var vopp = document.getElementById("opp");
vll.onclick=function(){
für(var i=0;i<vlist.length;i++){
vlist[i].checked=vll.checked;
}
}
für (var i = 0; i <vlist.length; i++) {
vlist[i].onclick=Funktion(){
wenn(dies.geprüft==false){
vll.checked=false;
}
anders{
für(var i2=0;i2<vlist.length;i2++){
wenn(vlist[i2].checked==false){
brechen;
}
wenn(i2>=vlist.length-1){
vll.checked=true;
}
}
}
}
}
vopp.onclick=Funktion(){
für(var i=0;i<vlist.length;i++){
vlist[i].checked=!vlist[i].checked;
wenn(vlist[i].checked==false){
vll.checked=false;
}
}
}
</Skript>
</body>
</html>Die zweite Möglichkeit besteht darin, den Stil des Kontrollkästchens anzupassen, d. h. unser Kontrollkästchen durch ein Bild zu ersetzen, um einen coolen Effekt hinzuzufügen. Dabei verwende ich ausschließlich CSS3-Schreibweise und verwende kein JavaScript. <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
.box1{
Breite: 1000px;
Höhe: 50px;
Position: relativ;
}
Eingang{
Breite: 50px;
Höhe: 50px;
Deckkraft: 1;
Anzeige: keine;
}
Eingabe+Beschriftung{
Anzeige: Block;
Breite: 50px;
Höhe: 50px;
Hintergrund: url(img/2.png);
Hintergrundgröße: 100 %;
}
Eingabe: aktiviert + Label {
Hintergrund: URL (Bild/1.PNG);
Hintergrundgröße: 100 %;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box1">
<input Typ="Kontrollkästchen" Name="" ID="input1" Wert="" />
<label für="input1"></label>
</div>
<div Klasse="Box2">
<input Typ="Kontrollkästchen" Name="" ID="input2" Wert="" />
<label für="input2"></label>
</div>
<div Klasse="Box3">
<input Typ="Kontrollkästchen" Name="" ID="input3" Wert="" />
<label für="input3"></label>
</div>
</body>
</html>Oben ist die vom Editor eingeführte Funktionsweise von Kontrollkästchen in HTML-Seiten dargestellt. Ich hoffe, dass sie für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: So verwenden Sie CSS-Zähler, um geordnete Zahlenlisten zu verschönern
>>: base target="" gibt das Ziel des Basislinks zum Öffnen des Frames an
Artikel empfehlen
Erläuterung des Prozesses des Docker-Packaging-Node-Projekts
Als Backend-Programmierer muss ich manchmal an Fr...
Die tdwidth-Einstellung der Tabelle in mehreren Divs ist gleich und kann nicht ausgerichtet werden
Kürzlich habe ich festgestellt, dass selbst wenn d...
JavaScript-Komposition und Vererbung erklärt
Inhaltsverzeichnis 1. Einleitung 2. Vererbung der...
Installations-Tutorial für MySQL 8.0.15-Version: Verbindung zu Navicat.list herstellen
Die Fallstricke 1. In vielen Tutorials im Interne...
Deaktivieren der AutoVervollständigen-Funktion im Eingabefeld
Jetzt können wir ein Eingabeattribut namens „Autov...
Tipps zum Erstellen zweidimensionaler Arrays in JavaScript
Erstellen eines zweidimensionalen Arrays in Js: Z...
Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis
Inhaltsverzeichnis Definition Struktur Beispiele ...
7 coole dynamische Website-Designs zur Inspiration
Im Bereich Design gibt es jedes Jahr unterschiedl...
Umfassendes Verständnis von HTML-Formularelementen
Wie unten dargestellt: XML/HTML-CodeInhalt in die...
jQuery implementiert dynamische Tag-Ereignisse
In diesem Artikel wird der spezifische Code von j...
Ein IE-Absturzfehler
Code kopieren Der Code lautet wie folgt: <styl...
Beispiel für die Implementierung von Gruppierung und Deduplizierung in einer MySQL-Tabellenverknüpfungsabfrage
Inhaltsverzeichnis Geschäftslogik Datentabellenst...
Detaillierte Erklärung zur Installation der MySQL-Datenbank auf dem Alibaba Cloud Server
Vorwort Da ich während des Lernprozesses Zookeepe...
MySQL 8.0.21-Installationstutorial unter Windows-System (Abbildung und Text)
Installationsvorschlag : Versuchen Sie, für die I...
Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung
RPM-Paketverwaltung Ein Verpackungs- und Installa...