jquery实现checkbox同组互斥实现单选

最新推荐文章于 2023-02-23 18:15:52 发布

jattxgt

最新推荐文章于 2023-02-23 18:15:52 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： jquery checkbox

本文链接：https://blog.csdn.net/qq_38555490/article/details/103390344

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="js/jquery.min.js"></script> -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<input type="checkbox" value="gzs" name="bqbj" id="chk1"  onclick="gzs(this)">市级办件
		<input type="checkbox" value="zgq" name="bqbj" id="chk2" onclick="zgq(this)">本区办件
	</body>
	<script>
		function gzs(obj){
			if(obj.checked){                     
        		//如果当前项被选中了,//则不能选择第二组
        		 $("#chk2").prop("checked",false);  
        	}
		}
		
		function zgq(obj){
			if(obj.checked){                     
				//如果当前项被选中了,//则不能选择第二组
				 $("#chk1").prop("checked",false);  
			}
		}
	</script>
</html>

截图示例：

涉及到的jquery知识

//判断checkbox 是否选中  
$("#id").is(":checked");//选中，返回true，没选中，返回false  
  
//设置checkbox为选中状态  
$("#id").prop("checked",true);  
  
//设置checkbox为不选中状态  
$("#id").prop("checked",false);