请选择 进入手机版 | 继续访问电脑版

JQuery判断radio(单选框)是否选中和获取选中值方法

2020-12-24 09:30| 发布者: admin| 查看: 302| 评论: 0|原作者: admin
摘要: 这篇文章主要介绍了JQuery判断radio(单选框)是否选中和获取选中值方法总结,本文讲解了利用获取选中值判断选中、使用checked属性判断选中、jquery获取radio单选按钮的值、获取一组radio被选中项的值、设置单选按钮 ...
这篇文章主要介绍了JQuery判断radio(单选框)是否选中和获取选中值方法总结,本文讲解了利用获取选中值判断选中、使用checked属性判断选中、jquery获取radio单选按钮的值、获取一组radio被选中项的值、设置单选按钮被选中等内容,需要的朋友可以参考下

一、利用获取选中值判断选中,直接上代码,别忘记引用JQuery包
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JQuery radio</title>
  6. <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
  7. <script type="text/javascript" language="javascript">
  8. /*------判断radio是否有选中,获取选中的值--------*/
  9.     $(function(){
  10.          $("#btnSubmit").click(function(){
  11.             var val=$('input:radio[name="sex"]:checked').val();
  12.             if(val==null){
  13.                 alert("什么也没选中!");
  14.                 return false;
  15.             }
  16.             else{
  17.                 alert(val);
  18.             }
  19.             var list= $('input:radio[name="list"]:checked').val();
  20.             if(list==null){
  21.                 alert("请选中一个!");
  22.                 return false;
  23.             }
  24.             else{
  25.                 alert(list);
  26.             }         
  27.          });
  28.      });
  29. </script>
  30. </head>

  31. <body>
  32. <form id="form1" >
  33. <input type="radio"  name="sex" value="男" />男
  34. <input type="radio" name="sex" value="女" />女
  35. <br />
  36. <input type="radio"  name="list" value="十分满意" />十分满意
  37. <input type="radio" name="list" value="满意" />满意
  38. <input type="radio" name="list" value="不满意" />不满意
  39. <input type="radio" name="list" value="非常差" />非常差
  40. <br />
  41. <input type="submit" value="submit"  id="btnSubmit" />
  42. </form>
  43. </body>
  44. </html>
复制代码
radio不能用“checked”相等来判断,只用用true来判断  
  1. <script type="text/javascript">
  2.         $(function () {
  3.             $("input").click(function () {
  4.                 if ($(this).attr("checked")) {
  5.                     alert("选中了");
  6.                 }
  7.             });
  8.         });
  9.     </script>
  10. </head>
  11. <body>
  12. <input type="radio"/>
  13. </body>
  14. </html>
复制代码
二、使用checked属性判断选中
radio不能用“checked”相等来判断,只用用true来判断   
  1. <script type="text/javascript">
  2.         $(function () {
  3.             $("input").click(function () {
  4.                 if ($(this).attr("checked")) {
  5.                     alert("选中了");
  6.                 }
  7.             });
  8.         });
  9.     </script>
  10. </head>
  11. <body>
  12. <input type="radio"/>
  13. </body>
  14. </html>
复制代码
三、jquery获取radio单选按钮的值  
  1. $("input[name='items']:checked").val();  
复制代码
另:判断radio是否选中并取得选中的值,如下所示:
  1. function checkradio(){
  2. var item = $(":radio:checked");
  3. var len=item.length;
  4. if(len>0){
  5.   alert("yes--选中的值为:"+$(":radio:checked").val());
  6. }
  7. }
复制代码
四、获取一组radio被选中项的值  
  1. var item = $('input[name=items][checked]').val();   
复制代码
五、设置单选按钮被选中
  1. $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项   
复制代码



鲜花

握手

雷人

路过

鸡蛋

关于我们

帝赛因(Dsaiyin)专注于国际快递系统研发.为合作伙伴提供先进、智能、实用、经济的物流信息化解决方案,公司的服务宗旨是:"用良心做好服务,用实力做好质量!"

联系我们

  • 地址: 杭州市萧山区城厢街道龙发大厦5楼
  • 电话: 0571-8273-4060
  • Email: 850272422@qq.com

分享到

新浪微博

微信公众号