使用jQuery动态设置单选框的选中效果


Posted in jQuery onDecember 06, 2018

一、需要实现的效果

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

使用jQuery动态设置单选框的选中效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>动态设置单选框的选中</title>
    <!--
      作者: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>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
  <script type="text/javascript">
    $("#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);
      }
    });
  </script>
</html>

二、注意

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

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

总结

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

jQuery 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
You might like
PHP解析url并得到url参数方法总结
2018/10/11 PHP
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
python与C互相调用的方法详解
2017/07/14 Python
一道python走迷宫算法题
2018/01/22 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python读取和保存图片5种方法对比
2018/09/12 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python list转置和前后反转的例子
2019/08/26 Python
详解Django CAS 解决方案
2019/10/30 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
物理教师自荐信范文
2013/12/28 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
致百米运动员广播稿
2014/01/29 职场文书
个人工作表现评语
2014/04/30 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
风之谷观后感
2015/06/11 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
Java版 单机五子棋
2022/05/04 Java/Android