Beispiel für eine JQuery-Kontrollkästchenauswahl

JQuery Kontrollkästchen-Auswahl wählt alle Elemente aus, die vom Typ sind Kontrollkästchen. Es wählt nur markierte Elemente vom Typ „Kontrollkästchen“ im Dokument aus. Es ermöglicht dem Benutzer, eine oder mehrere Auswahlmöglichkeiten auszuwählen. Es wird in Fällen verwendet, in denen der Benutzer mehrere Optionen auswählen möchte, z. B. bei der Frage „Alles Zutreffende ankreuzen“. Da :checkbox eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation ist, können Abfragen, die :checkbox verwenden, nicht von der Leistungssteigerung profitieren, die die native DOM-Methode querySelectorAll() bietet.

JQuery-Kontrollkästchen-Selektor-Syntax

$(“:checkbox”)

Beispiel für eine JQuery-Kontrollkästchenauswahl

<!doctype html>
<head>
<title>JQuery Checkbox Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Checkbox 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"/>
Football:<input type="checkbox" name="sport" value="Football"/>
Hockey:<input type="checkbox" name="sport" value="Hockey"/>
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.
  • In der nächsten Zeile definieren wir den Checkbox-Selektor, der alle Elemente vom Typ Checkbox 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.

JQuery-Checkbox-Selektor-Demo

  • Führen Sie diese Demo aus

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

Beispiel für eine JQuery-Kontrollkästchenauswahl

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen