JavaScript Checkboxen - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

JavaScript Checkboxen

Scripte > Snipped
Checkboxen und Radiobutton mit JavaScript
Javascript-Checkboxen und Radiobutton sind unentbehrlich für die Auswahl- und Listenauswertung und/oder zur Bestätigung nachfolgender Funktionen und Elemente. Der Vorteil besteht darin, dass diese verhältnismäßig einfach srukturiert sind und meist identische Funktionen aufweisen.
Es sind nur Beispiele, da diese nur zur Erweiterung in kompletten Funktions-Skripten zur Anwendung kommen sollen. Die Funktionsaufrufe sind meist ähnlich, so dass die Skripte mit- bzw. untereinader kombiniert werden können.
HTML-Code einfach nur kopieren und an vorgesehener Stelle im Body-Bereich <body>....</body> einfügen und Textelemente anpassen.

Die hier gezeigten Elemente sind Standard formatiert und können der Homepage angepasst werden:
Download Button
Code für den <HEAD> Bereich
<style>
.js-button { font-family: tahoma, arial; font-size: 12px; font-weight: normal;
background-color: #e1e1e1; border: 1px solid #000; border-radius: 5px;
padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; }
</style>

Auswahl-Listen Box:


Code für den <BODY> Bereich
<script>
function Wahl() {
var AA =""
if (document.aBox.Auswahl.selectedIndex == -1) {
AA = "nichts";
} else {
AA = document.aBox.Auswahl.options[
document.aBox.Auswahl.selectedIndex
].value;
}
alert("Du hast " + AA + " ausgewählt.");
}
</script>
<form name="aBox">
<select name="Auswahl" size=5>
<option value="Eisen-Nägel">Eisen-Nägel
<option value="Stahl-Nägel">Stahl-Nägel
<option value="Holz-Schrauben"> Holz-Schrauben
<option value="Gewinde-Schrauben"> Gewinde-Schrauben
<option value="Schlüssel-Schrauben"> Schlüssel-Schrauben
<option value="Muttern"> Muttern
<option value="Unterlegscheiben"> Unterlegscheiben
<option value="Stifte"> Stifte
<option value="Splinte"> Splinte
<option value="Nieten"> Nieten
</select><br>
<input type=button class="js-button" value="Auswahl" onClick="Wahl()">
</form>
Bestätigungs-Checkbox:
Mahlzeiten:
Frühstück
Mittag
Abendmahl
Code für den <BODY> Bereich
<script>
function checkRadio() {
if (document.rBox.a.checked == true) {alert('Mahlzeit wurde ausgewählt');}
if (document.rBox.b[0].checked == true) {alert('... mit Frühstück als Auswahl.');}
if (document.rBox.b[1].checked == true) {alert('... mit Mittag als Auswahl.');}
if (document.rBox.b[2].checked == true) {alert('... mit Abendmahl als Auswahl.');}
}
</script>
<form name="rBox">
<input type=checkbox name=a> Mahlzeiten: <br>
<input type=radio name=b> Frühstück <br>
<input type=radio name=b> Mittag <br>
<input type=radio name=b> Abendmahl <br>
<input type=button class="js-button" value="Prüfen"
onClick="checkRadio()">
</form>
Pflichtfeld-Checkbox:
Ja, ich möchte jetzt zur Startseite
Code für den <BODY> Bereich
<script>
function confirm() {
if(document.cBox.r.checked==true) {
document.cBox.elements['furth'].disabled=false;
} else {
document.cBox.elements['furth'].disabled=true;
}
}
</script>
<form name="cBox">
<input type=checkbox name="r" onClick="confirm()">
Ja, ich möchte jetzt zur Startseite <br>
<input type=button class="js-button" value="bestätigen" disabled name="furth"
onClick="location='index.php';">
</form>
Auswahl-Checkbox:
Geld Auto Glück Liebe
Code für den <BODY> Bereich
<script>
function Check() {
var vote = 0;
for (var i = 0; i < document.auswahl.vote.length; i++) {
if (document.auswahl.vote[i].checked) {
vote = i+1;
}
}
if (vote == 0) {
alert ("Bitte wählen Sie etwas aus.");
} else {
alert("Danke für Ihre Auswahl!");
}
}
</script>
<form name="auswahl">
<input type=radio name="vote"> Geld
<input type=radio name="vote"> Auto
<input type=radio name="vote"> Glück
<input type=radio name="vote"> Liebe
<input type=button class="js-button" value="Meine Auswahl!" onClick="Check()">
</form>
Mini Länder-Datenbank:
Code für den <BODY> Bereich
<script>
function Datenbank() {
var Satz = document.dbBox.index.options[
document.dbBox.index.selectedIndex
].value
var Wort = Satz.split("*")
var Land = Wort[0]  // Land
var Stadt = Wort[1] // Hauptstadt
var TLD = Wort[2]   // Top-Level Domain
alert("Land:" + Land + "\rStadt:" + Stadt + "\rTLD.:" + TLD)
}
</script>
<form name="dbBox">
<select name="index" size=1>
<option selected value=" Deutschland * Berlin * DE "> Deutschland </option>
<option value=" Österreich * Wien * AT "> Österreich </option>
<option value=" Schweiz * Bern * CH "> Schweiz </option>
<option value=" Frankreich * Paris * FR "> Frankreich </option>
<option value=" England * London * UK "> England </option>
<option value=" Polen * Warschau * PL "> Polen </option>
<option value=" Ungarn * Budapest * HU "> Ungarn </option>
<option value=" Spanien * Matrid * ES "> Spanien </option>
<option value=" Luxemburg * Luxemburg * LU "> Luxemburg </option>
<option value=" Griechenland * Athen * GR "> Griechenland </option>
</select>
<input type=button class="js-button" value="Daten anzeigen" onClick="Datenbank()">
</form>
Radiobutton mit Hinweisbox:
1:
2:
3:
4:
5:
Code für den <BODY> Bereich
1: <input type="radio" name="radio" value="Deine erste Nacht mit Barbara."
onClick="alert(value)">
<br>
2: <input type="radio" name="radio" value="Deine zweite Nacht mit Claudia."
onClick="alert(value)">
<br>
3: <input type="radio" name="radio" value="Deine dritte Nacht mit Heidi"
onClick="alert(value)">
<br>
4: <input type="radio" name="radio" value="Deine vierte Nacht mit Ursula"
onClick="alert(value)">
<br>
5: <input type="radio" name="radio" value="Deine fünfte Nacht mit UWE ???"
onClick="alert(value)">
Felder dynamisch hinzufügen:
Felder hinzufügen
Code für den <BODY> Bereich
<script>
var feld = 1;
var feldm = 1;
function feld_plus() {
if (feld <= 20) {                // Feldanzahl begrenzen
var inhalt = "Feldtext " + feld;
document.getElementById('dynamic_input').innerHTML +=
"<input type='text' name='n_" + feld + "' value='" + inhalt + "'><br>";
feld++;
}
}
function feld_minus() {
if (feld > feldm) {
feld--;
document.getElementById('dynamic_input').innerHTML = "";
for (var zaehler = feldm; zaehler < feld; zaehler++) {
var inhalt = "Feldtext " + zaehler;
document.getElementById('dynamic_input').innerHTML +=
"<input type='text' name='n_" + zaehler + "' value='" + inhalt + "'><br>";
}
}
}
</script>
Felder hinzufügen
<input type="button" class="js-button" value="-" onClick="feld_minus();">
<input type="button" class="js-button" value="+" onClick="feld_plus();"><br>
<div id="dynamic_input"></div>
Auswahlliste aktivieren:

->
   ->
Code für den <BODY> Bereich
<select id="selA" onChange="document.getElementById('selB').disabled = false">
<option>Bitte auswählen</option>
<option>Frühstück</option>
<option>Mittag</option>
<option>Abendessen</option>
</select>
<br> -&gt;
<select id="selB" onChange="document.getElementById('selC').disabled = false">
<option>Bitte auswählen</option>
<option>Brötchen</option>
<option>Weizenbrot</option>
<option>Vollkornbrot</option>
</select>
<br> &nbsp;&nbsp; -&gt;
<select id="selC" disabled="disabled">
<option>Bitte auswählen</option>
<option>Kaffee</option>
<option>Tee</option>
<option>Kakao</option>
</select>

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt