JQuery控制Radio选中方法分析

前端技术 2023/09/01 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1306

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案