一、需要实现的效果

这里使用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动态设置单选框的选中的更多相关文章

  1. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  2. SSRS动态设置文本框属性

    SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...

  3. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  4. JS判断单选框是否选中

    判断单选框是否选中$("#isallday").attr("checked")

  5. jquery 如何获取单选框的值

    jquery 如何获取单选框的值   获取单选框的值有三种方式: 1.$('input:radio:checked').val():2.$("input[type='radio']:chec ...

  6. Jquery判断单选框是否选中和获取选中的值

    第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]

    val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...

  8. jquery 单选框整个选中

    问题:遇到单选框,如图 解决办法:利用jqurey click->checked <!DOCTYPE html> <html lang="en"> & ...

  9. Jquery动态设置下拉框selected --（2018 08/12-08/26周总结）

    1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: &l ...

随机推荐

  1. python编程从入门到实战1-3章

    print('hellow world') """ 多行注释"""#大小写print('i love you')mssage='hellow ...

  2. react-native 打包成apk 文件

    用android studio 打包成apk 文件 js build 执行: react-native bundle --platform android --dev false --entry-fi ...

  3. SQL基本注入演示

    作者:ZERO 所属团队:Arctic Shell 参考文献:<sql注入攻击与防御> 使用平台:pikachu漏洞练习平台 导语:  在owasp发布的top10排行榜中注入漏洞一直是危 ...

  4. 大数据与云计算的关系是什么，Hadoop又如何参与其中？Nosql在什么位置，与BI又有什么关系？

    大数据与云计算的关系是什么,Hadoop又如何参与其中,Nosql在什么位置,与BI又有什么关系?以下这篇文字讲他们的关系讲的非常清楚.  在谈大数据的时候,首先谈到的就是大数据的4V特性,即类型复杂 ...

  5. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  6. 使用Nginx做图片服务器时候，配置之后图片访问一直是 404问题解决

    我的错误配置是: 服务器文件根地址: 想通过浏览器输入这个地址访问到图片: 但是会发现文件找不到会一直404,原因是根路径配置错误,来看下root路径原理: root 配置的意思是,会在root配置的 ...

  7. [Swift]LeetCode5. 最长回文子串 | Longest Palindromic Substring

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  8. vue中央事件总线eventBus的简单理解和使用

    公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...

  9. Git中用vim打开、修改、保存文件（转）

    一.vim 有两种工作模式: 1.命令模式:接受.执行 vim操作命令的模式,打开文件后的默认模式: 2.编辑模式:对打开的文件内容进行 增.删.改 操作的模式: 3.在编辑模式下按下ESC键,回退到 ...

  10. 10.Flask上下文

    1.1.local线程隔离对象 不用local对象的情况 from threading import Thread request = ' class MyThread(Thread): def ru ...