Text anzeigen, wenn das Kontrollkästchen in JavaScript aktiviert ist
-
Verwenden Sie die JavaScript-Eigenschaft
.checked, um Text anzuzeigen, wenn das Kontrollkästchen aktiviert ist -
Verwenden Sie die Funktion
is()von jQuery und die Eigenschaft.checkedvon JavaScript, um Text anzuzeigen, wenn das Kontrollkästchen aktiviert ist -
Verwenden Sie die jQuery-Ereignisse
readyundclick, um Text anzuzeigen, wenn das Kontrollkästchen aktiviert ist
Dieser Artikel stellt Ihnen die verschiedenen Techniken zum Anzeigen von Text vor, wenn das Kontrollkästchen in JavaScript aktiviert ist. Es informiert Sie auch über JavaScript- und jQuery-Funktionen und -Ereignisse.
Verwenden Sie die JavaScript-Eigenschaft .checked, um Text anzuzeigen, wenn das Kontrollkästchen aktiviert ist
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox</title>
</head>
<body>
<p>Let see how to know if check box is checked:</p>
<label for="check">Checkbox:</label>
<input type="checkbox" id="check" onclick="checkfunction()">
<p id="message" style="display:none">Checkbox is Checked Now!</p>
</body>
</html>
JavaScript-Code:
function checkfunction() {
var check = document.getElementById('check');
var message = document.getElementById('message');
if (check.checked == true) {
message.style.display = 'block';
} else {
message.style.display = 'none';
}
}
Ausgabe:
Der oben angegebene Code ruft die Elemente ab, indem er auf die Werte ihrer ID, check und message, abzielt. Dann prüft es, ob der Wert von check.checked true oder false ist.
Wenn es true ist, zeigt es die Nachricht an, die in der message-Variablen gespeichert ist. Allerdings ist .checked eine boolesche Eigenschaft, die entweder true oder false sein kann.
Wir können diese Eigenschaft in reinem JavaScript verwenden und mit der jQuery-Funktion kombinieren. Siehe [hier] für Details.
Anstatt die Meldung im Fenster anzuzeigen, ob das Kontrollkästchen aktiviert ist oder nicht, können wir die Alarm-Funktion verwenden, um eine Popup-Meldung im Browser anzuzeigen. Sie können Ihren JavaScript-Code zum Üben durch Folgendes ersetzen.
JavaScript-Code:
function checkfunction() {
if ((document.getElementById('check')).checked) {
alert('The checkbox is checked');
} else {
alert('The checkbox is not checked')
}
}
Ausgabe:
Verwenden Sie die Funktion is() von jQuery und die Eigenschaft .checked von JavaScript, um Text anzuzeigen, wenn das Kontrollkästchen aktiviert ist
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it and Submit
<button onclick="checked()"> Submit </button>
</body>
</html>
JavaScript-Code:
function checked() {
if ($('#check').is(':checked')) {
alert('Checked');
} else {
alert('Not Checked');
}
}
Ausgabe:
Die Methode checked() wird im oben angegebenen Code ausgeführt, wenn Sie auf den Button mit der Bezeichnung Submit klicken. Diese Methode ruft das erste Element ab, dessen Attribut id den Wert check hat.
Außerdem prüft es, ob die Eigenschaft checked des Elements true oder false ist. Wie? Hier prüft die Funktion is(), ob das ausgewählte Element mit dem Selektor-Element übereinstimmt.
Die Funktion is() prüft das aktuelle Element mit dem anderen Element; es kann ein Selektor oder ein jQuery-Objekt sein.
Die is()-Methode benötigt zwei Parameter, einer ist obligatorisch und der andere optional (das selectorElement ist obligatorisch und die function(index, element) ist optional). Diese Funktion gibt true zurück, wenn die Bedingung false erfüllt.
Denken Sie daran, dass sich $ hier wie document.getElementById verhält. Der obige Code zeigt Checked an, wenn das Kontrollkästchen aktiviert wird; andernfalls nicht markiert.
Verwenden Sie die jQuery-Ereignisse ready und click, um Text anzuzeigen, wenn das Kontrollkästchen aktiviert ist
HTML Quelltext:
<html>
<head>
<title>practice ready and click events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it
</body>
</html>
JavaScript-Code
$(document).ready(function() {
$('input').click(function() {
alert('You checed....');
});
});
Ausgabe:
Ready und Click sind jQuery-Events, die in JavaScript verwendet werden.
Das ready-Ereignis tritt auf, wenn das Document Object Model (DOM) geladen wird. Weitere Details zu ready finden Sie [hier].
Mit dem click wird dem selektierten Element das Click-Event zugeordnet. In unserem Beispiel ist es ein Tag input. Sie können [hier] für weitere Details lesen.
Denken Sie daran, dass Sie diese Ereignisse nur verwenden können, wenn Sie das Kontrollkästchen aktivieren möchten. Der Grund dafür ist, dass es das Ereignis click erkennt, anstatt die Eigenschaft checked zu prüfen.
In der oben angegebenen Ausgabe können Sie beobachten, dass immer You Checked angezeigt wird. Es spielt keine Rolle, ob Sie das Häkchen entfernen oder nicht, aber es erkennt nur, ob Sie klicken oder nicht.
Es bemerkt das click-Ereignis, was hilfreich ist, um zu wissen, ob das Kontrollkästchen nur aktiviert ist. Es wäre keine gute Wahl, wenn Sie auch wissen möchten, ob das Kontrollkästchen deaktiviert ist oder nicht.
