jquery获取单选框radio的值

<!DOCTYPE html>
<html>

   <body>
       <div>
           <input type="radio" name="list" value="十分满意" />十分满意
           <input type="radio" name="list" value="满意" />满意
           <input type="radio" name="list" value="不满意" />不满意
           <input type="radio" name="list" value="非常差" />非常差
       </div>
       <br />
       <div>
           <input type="radio" name="list2" value="十分满意2" checked="checked" />十分满意2
           <input type="radio" name="list2" value="满意2" />满意2
           <input type="radio" name="list2" value="不满意2" />不满意2
           <input type="radio" name="list2" value="非常差2" />非常差2
       </div>
       <input type="button" value="确定1" id="btnclick1" />
       <input type="button" value="确定2" id="btnclick2" />
       <script src="../js/plugins/jquery-3.2.1.min.js"></script>
       <script type="text/javascript">
           $(function() {
               //没有默认选中的情况
               //先判断radio是否有选中项，再获取选中的值
               $("#btnclick1").click(function() {
                   //获取选中项的value属性
                   var chkRadio = $('input:radio[name="list"]:checked').val();
                   if(chkRadio == null) {
                       alert("没有选中项");
                       return false;
                   } else {
                       alert(chkRadio);
                   }
               });

               //有默认选中的情况
               //获取选中项的值，一般采用遍历的方法，判断哪一项选中，获取其value属性的值
               $("#btnclick2").click(function() {
                   var chk2 = getRadioValue("list2");
                   alert(chk2);
               });

               function getRadioValue(radioName) {
                   var chkRadio = document.getElementsByName(radioName);
                   for(var i = 0; i < chkRadio.length; i++) {
                       if(chkRadio[i].checked)
                           return chkRadio[i].value;
                   }
               }

           })
       </script>
   </body>

</html>

jquery获取单选框radio的值

猜你喜欢