Beispiel für einen JQuery-Radio-Selektor

Dieses Tutorial erklärt die Verwendung von Radiowähler in jQuery. Der Radiowähler Wählt alle Elemente aus, die auf der Webseite vom Typ Radio sind. Der Radio-Selektor ähnelt der Form $(“(type=radio)”). Es wird empfohlen, dass es mit einem Doppelpunkt (:) vor dem Tag-Namen beginnt; andernfalls wird standardmäßig der universelle Selektor verwendet $( ":radio" ) um alle Elemente auf der Seite auszuwählen. Um es klarzustellen, nur mit $( "*:radio" )ist einfach gleichbedeutend mit $( "input:radio" ) Also

sollte stattdessen verwendet werden. Schauen wir uns ein einfaches Beispiel für den Radio-Selektor an.

$(“:radio”)

JQuery Radio Selector-Syntax

<!doctype html>
<head>
<title>JQuery Radio Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Radio Selector Example</h2>
<style>
 div {
    color: red;
  }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $(":radio").wrap("<span style="background-color:orange"/>");
        $("input").click(function(){
          $("div").text($("input:checked").val()+ " is checked");
        });
   });
</script>
   <form>
      Cricket :<input type="radio" name="sport" value="Cricket"/><br>
      Football:<input type="radio" name="sport" value="Football"/><br>
      Hockey  :<input type="radio" name="sport" value="Hockey"/>
   </form>
<div></div>
</body>
</html>
  • Beispiel für einen JQuery-Radio-Selektor
  • 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 Radio-Selektor, der alle Elemente vom Typ Radio auswählt. Es verwendet die Wrap-Methode, die die HTML-Struktur um das Element in den übereinstimmenden Elementen definiert.
  • $(“div”).text($(“input:checked”).val()+ ” wird geprüft“); Zeile definiert den Wert des überprüften Radioelements mithilfe der Methode val(). Die Methode val() gibt den Wert des Attributs des übereinstimmenden Elements im Dokument zurück.
  • Wenn wir das obige Skript ausführen, erhalten wir Radioelemente. Wenn wir auf das jeweilige Element klicken, erhalten wir den Namen dieses Radioelements mit roter Farbe, wie in der CSS-Div-Klasse angegeben.

    JQuery Radio Selector-Demo

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

    Beispiel für einen JQuery-Radio-Selektor

    Beispiel für einen JQuery-Radio-Selektor

    Kommentar verfassen

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

    Nach oben scrollen