checkbox实现单选功能-优快云博客

本文链接：https://blog.youkuaiyun.com/parade0393/article/details/79775546

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>checkbox实现单选</title>
		<script type="text/javascript" src="d:/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div>
			<input type="checkbox" name="春天" value="春天" οnclick="test1(this)">春天
			<input type="checkbox" name="夏天" value="夏天" οnclick="test2(this)">夏天
			<input type="checkbox" name="秋天" value="秋天" οnclick="test3(this)">秋天
			<input type="checkbox" name="冬天" value="冬天" οnclick="test4(this)">冬天
		</div>
	</body>
	<script type="text/javascript">
		function test1(obj){
			$(obj).siblings().each(function(n,ele){
				if($(ele).is(":checked")){
					$(this).prop("checked",false)
				}
			})
		}
		function test2(obj){
			$(obj).siblings().each(function(n,ele){
				if($(ele).is(":checked")){
					$(this).prop("checked",false)
				}
			})
		}
		function test3(obj){
			$(obj).siblings().each(function(n,ele){
				if($(ele).is(":checked")){
					$(this).prop("checked",false)
				}
			})
		}
		
		function test4(obj){
			$(obj).siblings().each(function(n,ele){
				if($(ele).is(":checked")){
					$(this).prop("checked",false)
				}
			})
		}
	</script>
</html>

用到的几个小知识点

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