suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie deaktiviere ich ein Optionsfeld mit JavaScript/jQuery?

Wie deaktiviere ich ein Optionsfeld mit JavaScript/jQuery?

WBOY
WBOYnach vorne
2023-08-31 10:25:02857Durchsuche

Wie deaktiviere ich ein Optionsfeld mit JavaScript/jQuery?

Manchmal müssen wir ein Optionsfeld mithilfe von JavaScript oder JQuery deaktivieren. Beispielsweise verwenden wir Optionsfelder in einem Formular. Wenn der Benutzer auf die Schaltfläche „Formular löschen“ klickt, müssen wir alle Optionsfelder deaktivieren und dem Benutzer erneut erlauben, eine beliebige Option aus den Optionsfeldern auszuwählen.

In diesem Tutorial lernen wir verschiedene Möglichkeiten kennen, einzelne oder mehrere Optionsfelder mithilfe von JQuery oder JavaScript zu deaktivieren.

Deaktivieren Sie Optionsfelder mit JavaScript

Wir können über ID, Tag, Name oder auf andere Weise auf Optionsfelder in JavaScript zugreifen. Anschließend können wir die aktivierte Eigenschaft des Optionsfelds deaktivieren, indem wir einen falschen booleschen Wert zuweisen.

Grammatik

Benutzer können ein Optionsfeld mithilfe des aktivierten Attributs gemäß der folgenden Syntax deaktivieren. 

radio.checked = false;

In der obigen Syntax ist Radio das Optionsfeld, auf das über JavaScript zugegriffen wird.

Beispiel 1

Im folgenden Beispiel haben wir Optionsfelder erstellt. Der Benutzer kann das Optionsfeld überprüfen, indem er darauf klickt. Wenn der Benutzer später auf die Schaltfläche klickt, ruft er die Funktion „clearRadio()“ auf.

In der Funktion „clearRadio()“ verwenden wir die ID des Radioeingangs, um darauf zuzugreifen. Als Nächstes greifen wir auf die ausgewählte Eigenschaft des Radioeingangs zu und weisen einen falschen booleschen Wert zu, um das Optionsfeld zu deaktivieren. 

<html>
<body>
   <h2> Using the <i> Checked property of radio button </i> to uncheck radio button in JavaScript. </h2>
   <br>
   <label for = "radio_btn"> Test </label>
   <input type = "radio" id = "radio_btn" value =   "test">
   <br> <br>
   <button onclick = "clearRadio()"> Uncheck Radio </button>
   <br> <br>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById("output");
   function clearRadio() {
      let radio = document.getElementById("radio_btn");
      radio.checked = false;
   }
</script>
</html>

In der obigen Ausgabe kann der Benutzer beobachten, dass die Funkeingabe immer dann gelöscht wird, wenn die Schaltfläche „Radio deaktivieren“ gedrückt wird.

Deaktivieren Sie das Optionsfeld mit JQuery

Wir können JQuery auch verwenden, um die Funkeingabe zu löschen. In JQuery können wir mithilfe der prop()-Methode jedes Attribut für ein HTML-Element festlegen. Die prop()-Methode verwendet zwei Werte als Parameter: den Eigenschaftsnamen und den Eigenschaftswert.

Hier übergeben wir „checked“ als Eigenschaftsnamen und false als Eigenschaftswert, um ein bestimmtes Optionsfeld mithilfe von JQuery zu deaktivieren.

Grammatik

Benutzer können ein Optionsfeld mithilfe der prop()-Methode von JQuery gemäß der folgenden Syntax deaktivieren. 

$("#radio_btn").prop('checked', false);

In der obigen Syntax übergeben wir den Attributnamen „checked“ als ersten Parameter und den Attributwert false als zweiten Parameter.

Beispiel 2

Im Beispiel unten haben wir ein Optionsfeld erstellt. Wenn ein Klickereignis auf die Schaltfläche ausgelöst wird, wird das Optionsfeld gelöscht, indem mithilfe der prop()-Methode ein falscher Wert für die ausgewählte Eigenschaft festgelegt wird. 

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h2> Using the <i> prop() method </i> to uncheck radio button in JQuery</h2>
   <label for = "radio_btn"> Clear </label>
   <input type = "radio" id = "radio_btn" value = "clear">
   <br> <br>
   <button id = "btn"> Uncheck Radio </button>
   <br> <br>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById("output");
      
      // detect button click
      $('#btn').click(function () {
      
         // Clear radio button
         $("#radio_btn").prop('checked', false);
      })
</script>
</html>

Beispiel 3

Wir haben mehrere Funkeingänge erstellt und sie im folgenden Beispiel gruppiert. Daher kann der Benutzer einen von allen vier Funkeingängen auswählen. Wenn der Benutzer auf die Schaltfläche klickt, werden alle Funkeingaben gelöscht.

Hier greifen wir auf den Radioeingang nach Typ und Name zu. Selbst wenn der Benutzer einen Funkeingang aus der Gruppe auswählt, wird dieser deaktiviert. 

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h2> Using <i> jQuery </i> to clear multiple radio buttons </h2>
   <label for = "color"> Blue </label>
   <input type = "radio" id = "color" name = "color" value = "Blue">
   <label for = "color"> Black </label>
   <input type = "radio" id = "color" name = "color" value = "Black">
   <label for = "color"> Brown </label>
   <input type = "radio" id = "color" name = "color" value = "Brown">
   <label for = "color"> Green </label>
   <input type = "radio" id = "color" name = "color" value = "Green">
   <br> <br>
   <button id = "btn"> Clear all radio buttons </button>
   <br> <br>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById("output");
   $('#btn').click(function () {
      
      // clear all radio buttons
      $("input[type=radio][name=color]").prop('checked', false);
      output.innerHTML = "All radio buttons are unchecked!"
   })
</script>
</html>

Wir haben gelernt, Funkeingaben bei Bedarf mithilfe von JavaScript und jQuery zu löschen. Außerdem ist es notwendig, die Funkeingabe zu löschen, wenn der Benutzer das Formular absendet. Benutzer können anhand ihres Typs und Namens auf Optionsfeldgruppen zugreifen und dann alle Optionsfelder für eine einzelne Gruppe löschen.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich ein Optionsfeld mit JavaScript/jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html 事件
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie füge ich mit FabricJS Zeichen in IText ein?Nächster Artikel：Wie füge ich mit FabricJS Zeichen in IText ein?

In Verbindung stehende Artikel

Mehr sehen