Un moyen simple d'implémenter la traversée des boutons radio à l'aide de jQuery-js tutoriel-php.cn

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

小云云

Libérer： 2018-05-28 11:24:02

original

1657 Les gens l'ont consulté

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>

Copier après la connexion

3. Rendu d'implémentation :