一、需要实现的效果

这里使用jQuery来实现。需要实现的效果如下：当下拉条改变时，单选框选中的值随之变化。

\"\"

<!DOCTYPE html>
<html>
  <head>
    <  charset=\"utf-8\" />
    < >动态设置单选框的选中</ >
    <!--
      作者：Harrison
      时间：2018-12-05
      描述：当下拉条改变时，动态的设置单选框的值
    -->
  </head>
  <body>
    <select id=\"sexSelect\" style=\"width: 10%;\">
      <option value=\"1\">男</option>
      <option value=\"2\">女</option>
    </select>
    男：<input type=\"radio\" value=\"1\" name=\"sex\" id=\"sexRadio1\" checked/>
    女：<input type=\"radio\" value=\"2\" name=\"sex\" id=\"sexRadio2\"/>
  </body>
  <  type=\"text/ \" src=\"js/jquery-1.7.2.min.js\" ></ >
  <  type=\"text/ \">
    $(\"#sexSelect\").change(function(){
      //获取选中的下拉条
      var checkedOfSelect = $(\"#sexSelect\").val();
      //动态设置单选框的选中
      if(checkedOfSelect == 1){
        $(\"#sexRadio1\").prop(\"checked\",true);
        $(\"#sexRadio2\").prop(\"checked\",false);
      }
      if(checkedOfSelect == 2){
        $(\"#sexRadio1\").prop(\"checked\",false);
        $(\"#sexRadio2\").prop(\"checked\",true);
      }
    });
  </ >
</html>

二、注意

•当设置单选框的checked属性时，要使用jQuery的prop()方法,不能够使用jQuery的attr()方法，attr()只适合简单html元素设置。
•jQuery的prop()方法，第二个参数为布尔值，不能设置成string类型:

  正确：$(\"#sexRadio1\").prop(\"checked\",true);
  错误：$(\"#sexRadio1\").prop(\"checked\",\"true\");

总结

以上所述是小编给大家介绍的使用jQuery动态设置单选框的选中效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章