一、需要实现的效果

这里使用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爬虫第二天

    Python爬虫第二天   超时设置         有时候访问网页时长时间未响应,系统就会判断网页超时,无法打开网页.如果需要自己设置超时时间则:             通过urlopen()打开 ...

  2. 28 ArcMap 运行特别慢怎么办

    小编电脑配置如下: , 虽然不是太好吧,但还是满足ArcMap运行的要求的,但不知道为什么,就是很慢,终于在无意中,发现了一个位置,取消勾选以后,ArcMap变的快很多,亲测有效 取消后台处理后,Ar ...

  3. python | Elasticsearch-dsl常用方法总结(join为案例)

    Elasticsearch DSL是一个高级库,其目的是帮助编写和运行针对Elasticsearch的查询.它建立在官方低级客户端(elasticsearch-py)之上. 它提供了一种更方便和习惯的 ...

  4. 动态请求数据并放入bootstrap轮播图

    下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. mysql数据库备份_可执行文件

    这段时间接手运维的工作,刚开始就尝到了数据丢失的痛!老板抱怨,同事抱怨!都说先删库再跑路,我还不想跑! 下面是我的备份记录:(分4步) 1.编写备份执行文件sqlAutoBak.sh #!/bin/s ...

  6. 将字符串XX,SS以“，”符号进行区分并分别存储在数组中

    public static void main(String[] args) { String str = "EAN_13,1534651"; String strs[] = st ...

  7. SSIS - 5.优先约束

      一.优先约束和执行逻辑 任务和容器是SSIS中的可执行文件,一个优先约束连接着两个可执行文件:优先的可执行文件和约束的可执行文件,如下图. 它的执行逻辑如下图: 1)先执行优先可执行文件 2)判断 ...

  8. Hadoop 操作常见问题解决

    1. 安全模式下不可操作 提示信息: Hadoop "Cannot create directory .Name node is in safe mode." 解决方法: $ ha ...

  9. Trie树(字典树)的介绍及Java实现

    简介 Trie树,又称为前缀树或字典树,是一种有序树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的所有子孙都有相同的前缀,也 ...

  10. Thrift 代码分析

    Thrift的基本结束 Thrift是一个跨语言的服务部署框架,最初由Facebook于2007年开发,2008年进入Apache开源项目.Thrift通过IDL(Interface Definiti ...