JQuery-geprüfter Selektor

Der geprüfte JQuery-Selektor wählt alle geprüften Elemente aus. Es wählt nur markierte Elemente vom Typ „Kontrollkästchen“ im Dokument aus. Es stimmt mit allen überprüften Eingabeelementen im Dokument überein. Der aktivierte Selektor wird nur für Optionsfelder oder Kontrollkästchen verwendet.

Beim Vergleich mit der Kontrollkästchenauswahl kann der Benutzer den Status ändern, indem er auf das Element klickt oder einen anderen Wert auswählt. Mit dem Checkbox-Selektor können die Checkboxen manuell ausgewählt werden. Wenn wir ein Kontrollkästchen auswählen möchten, das standardmäßig ausgewählt werden soll, verwenden wir dafür das aktivierte Attribut. Verwenden Sie das aktivierte Attribut im Eingabe-Tag, sodass standardmäßig nur diese Kontrollkästchen ausgewählt werden.

JQuery überprüfte Selektorsyntax

$(“:checked”)

Beispiel für einen JQuery-geprüften Selektor

<!doctype html>
<head>
<title>JQuery Checked Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Checked Selector Example</h2>
<style>
 div {
    color: red;
  }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $(":checkbox").wrap("<span style="background-color:orange"/>");
	 $("input(name="sport")").change(function () {
	    var count = $("input(name="sport"):checked").length;
	       $("div").text(+count+ " checked");
         });
   });
</script>
<form action="">
Select your favourite sport:<br/>
Cricket:<input type="checkbox" name="sport" value="Cricket" checked/>
Football:<input type="checkbox" name="sport" value="Football"/>
Hockey:<input type="checkbox" name="sport" value="Hockey" checked/>
Volleyball:<input type="checkbox" name="sport" value="Volleyball"/>
</form>
<div></div>
</body>
</html>

Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
Die nächste Zeile definiert den aktivierten Selektor, der alle aktivierten Elemente vom Typ Kontrollkästchen auswählt. Es verwendet die Wrap-Methode, die die HTML-Struktur um das Element in den übereinstimmenden Elementen definiert.
Die Zeile $(“input(name=’sport‘)”).change(function ()) definiert ein Änderungsereignis, das auftritt, wenn der Wert des Elements geändert wird.
var count = $(“input(name=’sport‘):checked“).length; Die Anweisung definiert die Anzahl der aktivierten Kontrollkästchen durch Angabe des Namensattributs des Eingabe-Tags.
$(“div”).text( +count+ ”checked” ); Zeile gibt an, wie viele Kontrollkästchen vom Benutzer ausgewählt/aktiviert werden, und verwendet die CSS-Farbeigenschaft, um die Nachricht in roter Farbe anzuzeigen.
Wenn wir das Skript ausführen, erhalten wir vier Kontrollkästchen, wie im Skript angegeben. Die Kontrollkästchen werden mit oranger Hintergrundfarbe um jedes Element herum angezeigt. Die aktivierten Kontrollkästchen werden mit einem Häkchen im Browser angezeigt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe: