recherche

Maison >interface Web >js tutoriel >Un moyen simple d'implémenter la traversée des boutons radio à l'aide de jQuery

Un moyen simple d'implémenter la traversée des boutons radio à l'aide de jQuery

小云云
小云云original
2018-05-28 11:24:021712parcourir

Cet article présente principalement la méthode simple de jQuery pour implémenter le parcours des boîtes de boutons radio, impliquant les techniques de fonctionnement de jQuery pour parcourir les éléments du formulaire de page et la réponse aux événements. Les amis qui en ont besoin peuvent s'y référer.

1. Contexte du problème :

Il y a quatre cases à boutons radio, une pour les quatre saisons de l'année. Nous devons maintenant déterminer si cette case à boutons radio est sélectionnée. , attribuez sa valeur à la zone de saisie

2. Code d'implémentation : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>遍历单选框</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <style>
      #result{
       width: 200px;
      }
    </style>
    <script>
      $(document).ready(function(){
        $("#season").click(function(){
          var season = "";
          $("input[name=&#39;rad&#39;]").each(function(i){
            if($(this).is(":checked"))
            {
              season += "您选择的是一年的第" + (i+1) + "季度：" + $(this).val();
            }
          });
          $("#result").val(season);
        });
      });
    </script>
  </head>
  <body>
    <p>
      <input type="radio" name="rad" id="spring" value="春季" />
      <label for="spring">春季</label>
      <input type="radio" name="rad" id="summer" value="夏季" />
      <label for="summer">夏季</label>
      <input type="radio" name="rad" id="autumn" value="秋季" />
      <label for="autumn">秋季</label>
      <input type="radio" name="rad" id="winter" value="冬季" />
      <label for="winter">冬季</label><br>
      <input type="text" id="result" /><br>
      <input type="button" id="season" value="季节"/>
    </p>
  </body>
</html>

3. Rendu d'implémentation :

Recommandations associées. :

Explication détaillée de l'implémentation jQuery des exemples de cases à cocher traversantes

Partage d'exemples de méthode JQuery pour trouver des sous-éléments find() et traverser une collection chacun

Résumé de la méthode de traversée des nœuds JQuery

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partage d'exemples de paramètres liés à jQuery Validate et de règles de validation personnalisées couramment utiliséesArticle suivant：Partage d'exemples de paramètres liés à jQuery Validate et de règles de validation personnalisées couramment utilisées

Articles Liés

Voir plus