使用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 相关文章推荐
jquery dataTable 获取某行数据
May 05 jQuery
jQuery操作之效果详解
May 19 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
koa源码中promise的解读
2018/11/13 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python绘图模块之利用turtle画图
2021/02/12 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
市场营销个人求职信范文
2014/02/02 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
读书活动总结
2014/04/28 职场文书
品质口号大全
2014/06/17 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
考试作弊检讨
2015/01/27 职场文书
旷工辞退通知书
2015/04/17 职场文书
电影红河谷观后感
2015/06/11 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript