当前位置: 首页 > 编程笔记 >

JQuery控制Radio选中方法分析

洪子晋
2023-03-14
本文向大家介绍JQuery控制Radio选中方法分析,包括了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控制radio选中和不选中方法总结,包括了JQuery控制radio选中和不选中方法总结的使用技巧和注意事项,需要的朋友参考一下 一、设置选中方法 二、设置选中和不选中示例 通过name 通过id 三、另一种设置选中方法 您的性别:  四、根据值设置radio选中 五、使用prop方法操作示例

  • 本文向大家介绍JQuery radio(单选按钮)操作方法汇总,包括了JQuery radio(单选按钮)操作方法汇总的使用技巧和注意事项,需要的朋友参考一下 随着Jquery的作用越来越大,使用的朋友也越来越多。在Web中,由于CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快,代

  • 本文向大家介绍jquery radio的取值_radio的选中_radio的重置方法,包括了jquery radio的取值_radio的选中_radio的重置方法的使用技巧和注意事项,需要的朋友参考一下 radio 按钮组, name=”sex”. 1. 获取radio选中的value. 2. 选择 radio 按钮 (Male). 3. 选择 radio 按钮 (Female). 4. 选择 r

  • 本文向大家介绍jquery单选框radio绑定click事件实现方法,包括了jquery单选框radio绑定click事件实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery单选框radio绑定click事件实现方法。分享给大家供大家参考。 具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结,包括了Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结的使用技巧和注意事项,需要的朋友参考一下 jquery取radio单选按钮的值  另:判断radio是否选中并取得选中的值    如下所示:   jquery radio取值,checkbox取值,se

  • 本文向大家介绍三种取消选中单选框radio的方法,包括了三种取消选中单选框radio的方法的使用技巧和注意事项,需要的朋友参考一下 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。