jQuery实现遍历单选框

86 阅读 0 评论 57 点赞

我是靠谱客的博主饱满小海豚，最近开发中收集的这篇文章主要介绍jQuery实现遍历单选框，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、问题背景

有四个单选框，分别为一年四季，现在需要判断是否选中，如果选中这个单选框，就将其值赋值给输入框

2、实现源码

[html]  
   view plain 
    copy 
    
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>遍历单选框</title>  
         <script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>  
         <style>  
            #result{  
               width: 200px;  
            }  
         </style>  
         <script>  
             $(document).ready(function(){  
                 $("#season").click(function(){  
                     var season = "";  
                     $("input[name='rad']").each(function(i){  
                         if($(this).is(":checked"))  
                         {  
                             season += "您选择的是一年的第" + (i+1) + "季度：" + $(this).val();  
                         }  
                     });  
                     $("#result").val(season);  
                 });  
             });  
         </script>  
     </head>  
     <body>  
         <div>  
             <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="季节"/>  
         </div>  
     </body>  
 </html>  