Abrufen des Wertes eines angekreuzten Kontrollkästchens in JavaScript
- Überprüfen, ob ein Kontrollkästchen in JavaScript aktiviert ist
-
Abrufen von
checkbox-Werten -
Abrufen von Werten mehrerer ausgewählter Kontrollkästchen mit
querySelectorAll()in JavaScript -
Abrufen des Werts mehrerer ausgewählter Chechboxen mit der
getElementById()-Methode in JavaScript
Dieser Artikel hilft Ihnen bei der Verwendung von JavaScript, um zu prüfen, ob ein Kontrollkästchen aktiviert ist, die Werte von aktivierten Kontrollkästchen abzurufen und alle Kontrollkästchen zu aktivieren/deaktivieren.
Überprüfen, ob ein Kontrollkästchen in JavaScript aktiviert ist
Es gibt zwei Zustände für das Kontrollkästchen: aktiviert und deaktiviert.
Sie können diesen Verfahren folgen, um den Zustand eines Kontrollkästchens zu bestimmen.
- Verwenden Sie zunächst eine
DOM-Technik wiegetElementById()oderquerySelector(), um das Kontrollkästchen auszuwählen. - Rufen Sie dann die Eigenschaft
checkeddes Kontrollkästchens auf. Das Kontrollkästchen ist aktiviert, wenn seine aktivierte Eigenschaft tatsächlich ist; sonst ist es nicht.
Der folgende Code zeigt dies mit der Methode querySelector().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
In diesem Beispiel
Zuerst können Sie ein Html-Checkbox-Element erstellen.
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
Als zweites prüfen Sie das angekreuzte Attribut der Checkbox mit der id #submit.
const js = document.querySelector('#submit');
console.log(js.checked);
Das in der Konsole angezeigte Ergebnis ist false, da das Kontrollkästchen deaktiviert ist.
false
Wenn das Kontrollkästchen aktiviert ist, wird in der Konsole true angezeigt.
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
In der Konsole wird true angezeigt.
true
Abrufen von checkbox-Werten
Auf der folgenden Seite finden Sie eine checkbox und einen button. Der Wert des Kontrollkästchens wird im Konsolenfenster angezeigt, wenn Sie auf die Schaltfläche klicken:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="payment">
<input type="checkbox" id="payment" name="payment"> Payment
</label>
<button id="bt">Submit</button>
<script>
const js = document.querySelector('#payment');
const bt = document.querySelector('#bt');
bt.onclick = () => {
alert(js.value);
};
</script>
</body>
</html>
Unabhängig davon, ob das Kontrollkästchen aktiviert ist oder nicht, erhalten Sie immer die Zeichenfolge on, wenn Sie die Werteeigenschaft eines Kontrollkästchens erhalten.
Abrufen von Werten mehrerer ausgewählter Kontrollkästchen mit querySelectorAll() in JavaScript
Auf der folgenden Seite finden Sie drei Checkboxen. Wenn Sie ein oder mehrere Kontrollkästchen auswählen und die Schaltfläche drücken, werden die Werte der ausgewählten Kontrollkästchen angezeigt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<p>Select your favorite subject:</p>
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
<p>
<button id="bt">Get Selected subject</button>
</p>
<script>
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
</script>
</body>
</html>
Unten ist, wie es funktioniert.
Wir erstellen drei Checkbox-Elemente in HTML mit demselben Namen (Farbe), aber unterschiedlichen Werten.
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
Unter JavaScript:
- Fügen Sie zunächst Folgendes zum Click-Event-Handler der Schaltfläche hinzu:
- Verwenden Sie zweitens das Dokument, um die angegebenen Kontrollkästchen auszuwählen. Verwenden Sie im Click-Event-Handler die Methode querySelectorAll():
- Erstellen Sie drittens ein Array mit den Werten der ausgewählten Kontrollkästchen:
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
Abrufen des Werts mehrerer ausgewählter Chechboxen mit der getElementById()-Methode in JavaScript
Jetzt lernen Sie, wie Sie alle Kontrollkästchenwerte des Benutzers mit der Methode getElementById() abrufen. Schauen Sie sich das Beispiel unten an.
<html>
<body>
<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td>
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.ss');
for (var k = 0; k < inputs.length; k++) {
inputs[k].checked = true;
}
}
function getCheckboxValue() {
var sub1 = document.getElementById("s1");
var sub2 = document.getElementById("s2");
var sub3 = document.getElementById("s3");
var sub4 = document.getElementById("s4");
var sub5 = document.getElementById("s5");
var sub6 = document.getElementById("s6");
var result=" ";
if (sub1.checked == true){
var ss1 = document.getElementById("s1").value;
result = ss1 + ",";
}
else if (sub2.checked == true){
var ss2 = document.getElementById("s2").value;
result = result + ss2 + ",";
}
else if (sub3.checked == true){
document.write(result);
var ss3 = document.getElementById("s3").value;
result = result + ss3 + ",";
}
else if (sub4.checked == true){
var ss4 = document.getElementById("s4").value;
result = result + ss4 + ",";
}
else if (sub5.checked == true){
var ss5 = document.getElementById("s5").value;
result = result + ss5 + ",";
}
else if (sub6.checked == true){
var ss6 = document.getElementById("s6").value;
result = result + ss6;
} else {
return document.getElementById("result").innerHTML = "please,select any one";
}
return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>
</body>
</html>
Ausgabe:
Wenn Sie diesen Code ausführen, erhalten wir eine Antwort ähnlich der untenstehenden, in der Sie die Themen auswählen können, mit denen Sie vertraut sind.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn