recherche

Maison  >  Article  >  interface Web  >  Comment décocher un bouton radio en utilisant JavaScript/jQuery ?

Comment décocher un bouton radio en utilisant JavaScript/jQuery ?

WBOY
WBOYavant
2023-08-31 10:25:02857parcourir

Comment décocher un bouton radio en utilisant JavaScript/jQuery ?

Parfois, nous devons décocher un bouton radio à l'aide de JavaScript ou de JQuery. Par exemple, nous utilisons des boutons radio dans un formulaire. Lorsque l'utilisateur appuie sur le bouton Effacer le formulaire, nous devons décocher tous les boutons radio et permettre à nouveau à l'utilisateur de sélectionner n'importe quelle option parmi les boutons radio.

Dans ce tutoriel, nous apprendrons différentes façons de décocher un ou plusieurs boutons radio à l'aide de JQuery ou JavaScript.

Utilisez JavaScript pour décocher les boutons radio

Nous pouvons accéder aux boutons radio en JavaScript en utilisant un identifiant, une balise, un nom ou d'autres moyens. Ensuite, nous pouvons décocher la propriété vérifiée du bouton radio en attribuant une fausse valeur booléenne.

Grammaire

Les utilisateurs peuvent décocher un bouton radio en utilisant l'attribut coché selon la syntaxe ci-dessous. 

radio.checked = false;

Dans la syntaxe ci-dessus, radio est le bouton radio accessible à l'aide de JavaScript.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé des boutons radio. L'utilisateur peut cocher le bouton radio en cliquant dessus. Plus tard, lorsque l'utilisateur clique sur le bouton, il appelle la fonction clearRadio().

Dans la fonction clearRadio(), nous utilisons l'identifiant de l'entrée radio pour y accéder. Ensuite, nous accédons à la propriété sélectionnée de l'entrée radio et attribuons une fausse valeur booléenne pour décocher le bouton radio. 

<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>

Dans la sortie ci-dessus, l'utilisateur peut constater que l'entrée radio est effacée chaque fois que le bouton « Décocher la radio » est enfoncé.

Décochez le bouton radio en utilisant JQuery

Nous pouvons également utiliser JQuery pour effacer l'entrée radio. Dans JQuery, nous pouvons définir n'importe quel attribut pour un élément HTML à l'aide de la méthode prop(). La méthode prop() prend deux valeurs comme paramètres : le nom de la propriété et la valeur de la propriété.

Ici, nous passerons "checked" comme nom de propriété et false comme valeur de propriété pour décocher un bouton radio spécifique à l'aide de JQuery.

Grammaire

Les utilisateurs peuvent décocher un bouton radio à l'aide de la méthode prop() de JQuery en suivant la syntaxe suivante. 

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

Dans la syntaxe ci-dessus, nous transmettons le nom de l'attribut « vérifié » comme premier paramètre et la valeur de l'attribut false comme deuxième paramètre.

Exemple 2

Dans l'exemple ci-dessous, nous avons créé un bouton radio. Lorsqu'un événement de clic est déclenché sur le bouton, il effacera le bouton radio en définissant une fausse valeur pour la propriété sélectionnée à l'aide de la méthode prop(). 

<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>

Exemple 3

Nous avons créé plusieurs entrées radio et les avons regroupées dans l'exemple ci-dessous. Par conséquent, l'utilisateur peut sélectionner n'importe laquelle des quatre entrées radio. Lorsque l'utilisateur clique sur le bouton, toutes les entrées radio sont effacées.

Ici, nous accédons à l'entrée radio par type et nom. Ainsi, même si l'utilisateur sélectionne une entrée radio du groupe, il la décochera. 

<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>

Nous avons appris à effacer les entrées radio en cas de besoin à l'aide de JavaScript et jQuery. En outre, il est nécessaire d'effacer l'entrée radio lorsque l'utilisateur soumet le formulaire. Les utilisateurs peuvent accéder aux groupes de boutons radio par leur type et leur nom, puis effacer tous les boutons radio d'un seul groupe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery html 事件
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment insérer des caractères dans IText à l'aide de FabricJS ?Article suivant：Comment insérer des caractères dans IText à l'aide de FabricJS ?

Articles Liés

Voir plus