当前位置:主页 > jquery教程 > JQuery控制Radio选中方法分析

JQuery控制Radio选中的实例方法

发布:2019-12-05 09:04:43 108


给网友朋友们带来一篇JQuery实例相关的编程文章,网友伊国源根据主题投稿了本篇教程内容,涉及到JQuery、Radio选中、JQuery控制Radio选中方法分析相关内容,已被607网友关注,涉猎到的知识点内容可以在下方电子书获得。

JQuery控制Radio选中方法分析

本文实例讲述了JQuery控制Radio选中方法。分享给大家供大家参考。具体如下:

方法1:

$(function () { 
  $("#spanNan").click(function () { 
  $("#Radio1").attr("checked", true); 
  $("#Radio2").attr("checked", false); 
  });
  $("#spanNv").click(function () {
  $("#Radio2").attr("checked", true);
  $("#Radio1").attr("checked", false);
  });
})

方法2:(简单方法)

$(function () {
  $("#spanNan").click(function () {
  //$("#Radio1").attr("checked", true);
  //$("#Radio2").attr("checked", false);
  $("#Radio1").click();
  });
  $("#spanNv").click(function () {
  //$("#Radio2").attr("checked", true);
  //$("#Radio1").attr("checked", false);
  $("#Radio2").click();
  });
})

<input id="Radio2" type="radio" name="sex"/>
<label for="Radio2">女</label>

总结:

HTML的Radio控件若要实现单选,比如本例中男女的选择,需要给Radio添加name属性,且值相同;例:name=“sex”。

默认选上radio:

jQuery(document).ready(function(){
  $("input[name=targetBlank]:eq(0)").attr("checked",'checked');
  $("input[name=status]:eq(0)").attr("checked",'checked');
});

使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:

1.<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值
2.<input type="radio" name="testradio" value="jquery获取checkbox的值" />jquery获取checkbox的值
3.<input type="radio" name="testradio" value="jquery获取select的值" />jquery获取select的值

要想获取某个radio的值有以下的几种方法,直接给出代码:

$('input[name="testradio"]:checked').val();

$('input:radio:checked').val();

$('input[@name="testradio"][checked]');

$('input[name="testradio"]').filter(':checked');

差不多挺全的了,如果我们要遍历name为testradio的所有radio呢,代码如下

$('input[name="testradio"]').each(function(){alert(this.value);});

如果要取具体某个radio的值,比如第二个radio的值,这样写

<script type="text/javascript">
$(document).ready(function(){
  $("input[@type=radio][name=sex][@value=1]").attr("checked",true);
}); 
</script>

您的性别:

<input type="radio" name="sex" value="1" <s:if test="user.sex==1">checked</s:if>/>男 
<input type="radio" name="sex" value="0" <s:if test="user.sex==0">checked</s:if>/>女 

希望本文所述对大家的jQuery程序设计有所帮助。


参考资料

相关文章

  • 详解jQuery .attr()和.removeAttr()方法操作元素属性

    发布:2020-01-27

    本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性,不会的朋友可以参考下哈,希望对大家有所帮助


  • 如何使用jQuery+ajax实现鼠标单击修改内容

    发布:2020-03-01

    这篇文章主要介绍了jQuery+ajax实现鼠标单击修改内容的方法,需要的朋友可以参考下


  • jQuery3.0 最终发布

    发布:2020-02-05

    jQuery发布已经十年了,挺让人难以置信。过去的这些年Web开发变了很多,jQuery也随之变化着。在这个过程中,团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。


  • jquery实现显示已选用户实例方法

    发布:2019-09-15

    选择用户是一个比较常用的功能,主要包含2个功能点(保存已选选项、显示已选用户)


  • jQuery中attr()与prop()函数的实例用法

    发布:2021-05-25

    这篇文章主要介绍了jQuery中attr()与prop()函数用法,结合实例形式详细分析了attr()与prop()函数的使用技巧与相关注意事项,并附带了attr()与prop()函数用法的区别,需要的朋友可以参考下


  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    发布:2020-07-06

    这篇文章主要介绍了jQuery Ajax使用FormData上传文件和其他数据后端web.py获取 ,需要的朋友可以参考下


  • 深入理解bootstrap data和jquery .data

    发布:2020-02-16

    最近在做项目的时候用到了bootstrap,在使用中发现其data与jquery的data有些不一样的地方,记录一下,分享给大家


  • jQuery实现拖拽图标到回收站并删除功能的实例讲解

    发布:2020-05-21

    这篇文章主要介绍了基于jQuery实现拖拽图标到回收站并删除功能,实现非常简单,我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素的功能,感兴趣的小伙伴们可以


网友讨论