JavaScript Checkboxen - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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 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()">
<br>Ja, ich möchte jetzt zur Startseite <br>
<input type=button class="js-button" value="Weiter ..." 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 value=" Österreich * Wien * AT "> Österreich
<option value=" Schweiz * Bern * CH "> Schweiz
<option value=" Frankreich * Paris * FR "> Frankreich
<option value=" England * London * UK "> England
<option value=" Polen * Warschau * PL "> Polen
<option value=" Ungarn * Budapest * HU "> Ungarn
<option value=" Spanien * Matrid * ES "> Spanien
<option value=" Luxemburg * Luxemburg * LU "> Luxemburg
<option value=" Griechenland * Athen * GR "> Griechenland
</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>
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 65 Heute
            » 1 Gestern
            » 303 Woche
            » 303 Monat
            » 38828 Jahr
            » 263034 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt