一、需要实现的效果

这里使用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. 四、蛋炒饭（Egg fried rice）

    蛋炒饭,是一种常见菜肴.最早的记载见于1972年湖南长沙马王堆汉墓出土的竹简上有关"卵火高"的资料.经专家考证,"卵熇"是一种用黏米饭加鸡蛋制成的食品.有人推断 ...

  2. mybatis逆向工程的注意事项,以及数据库表

    1.选择性更新,如果有新参数就更换成新参数,如果参数是null就不更新,还是原来的参数 2.mybatis使用逆向工程,数据库建表的字段user_id必须用下滑线隔开,这样生成的对象private L ...

  3. XML语言2.约束

    三.XML的约束 目的:编写一个文件用来约束另一个xml文件的书写规范. DTD 用来约束xml的文件格式,保证这个文件是有效的. 内部DTD:所有的约束都是直接定义在xml文件中的 内部的 DOCT ...

  4. Dev_GridView：使用PopupContainerControl实现下拉树形列表

    要使用 DevExpress 实现下拉列表树,需要使用三个控件结合才可以实现 PopupContainerEdit.PopupContainerControl.TreeList 设置控件 PopupC ...

  5. python 外键用法 多对多关系 ORM操作 模板相关

    一.app/models中写类(设计表结构) 1.普通类 class  A(models.Model): id=modles.AutoField(primary_key=True) name=mode ...

  6. 解决git pull出现: Your local changes to the following files would be overwritten by merge: ...的问题

    今天在服务器上git pull是出现以下错误: error: Your local changes to the following files would be overwritten by mer ...

  7. Python档案袋（ Socket 与 ScoketServer 通信 ）

    Socket有一个缓冲区,缓冲区是一个流,先进先出,发送和取出的可自定义大小的,如果取出的数据未取完缓冲区,则可能存在数据怠慢.其中[recv(1024)]表示从缓冲区里取最大为1024个字节,但实际 ...

  8. 面试中程序员常见的Redis"刁难"问题，值得一读！

    导读 在程序员面试过程中Redis相关的知识是常被问到的话题.作为一名在互联网技术行业打击过成百上千名的资深技术面试官,总结了面试过程中经常问到的问题.十分值得一读. Redis有哪些数据结构? 字符 ...

  9. ASP.NET Core Web API 与 SSL

    SSL 一直没有真正研究过SSL,不知道下面的理解是否正确. SSL是Secure Sockets Layer的缩写,它用来保护服务器和客户端之前的通信.它是基于信任+加密的概念. 在介绍SSL的原理 ...

  10. 【Spark篇】---SparkSQL中自定义UDF和UDAF，开窗函数的应用

    一.前述 SparkSQL中的UDF相当于是1进1出,UDAF相当于是多进一出,类似于聚合函数. 开窗函数一般分组取topn时常用. 二.UDF和UDAF函数 1.UDF函数 java代码: Spar ...