jQuery——40. 获取复选框value及操作操作选中状态_jquery获取复选框选中的值-CSDN博客

本文链接：https://blog.csdn.net/weixin_63215361/article/details/146291656

1.获取复选框的选中状态value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: block;width: 200px;line-height: 30px;text-align: center;
				margin-top:20px ;background: #ccc;
			}
			button{
				width: 200px;height: 50px;margin-top:50px ;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					//1.获取复选框的选中状态value值
					var sg=[];//创建空数组存放选中的元素value值
					$("input:checkbox:checked").each(function(){
						sg.push($(this).val());	//push方法数组末尾添加
				});
					console.log(sg);
					
				});
			})
		</script>
	</head>
	<body>
		<!--复选框开始-->
		<input type="checkbox" name="sg[]"  value="pg" />苹果
		<input type="checkbox" name="sg[]"  value="xj" checked="checked"/>香蕉
		<input type="checkbox" name="sg[]"  value="pt" />葡萄
		<!--复选框结束-->
		
		
		<br /><br />
		<button>按钮</button>
	</body>
</html>

在这里插入图片描述
2.设置复选框选中状态，先删除所有的选中状态，然后再选

原理:先删除所有的复选框的选中状态,再选择要选中的复选框,添加"checked"属性

filter()方法筛选出与指定表达式匹配的元素集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: block;width: 200px;line-height: 30px;text-align: center;
				margin-top:20px ;background: #ccc;
			}
			button{
				width: 200px;height: 50px;margin-top:50px ;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
										
					//2.设置复选框选中状态，先删除所有的选中状态，然后在选
					//原理:先删除所有的复选框的选中状态,再选择要选中的复选框,添加"checked"属性
					//filter()方法筛选出与指定表达式匹配的元素集合
					$("input:checkbox").removeAttr("checked").filter("[value='pg'],[value='pt']").attr("checked","checked");
				});
			})
		</script>
	</head>
	<body>
		<!--复选框开始-->
		<input type="checkbox" name="sg[]"  value="pg" />苹果
		<input type="checkbox" name="sg[]"  value="xj" checked="checked"/>香蕉
		<input type="checkbox" name="sg[]"  value="pt" />葡萄
		<!--复选框结束-->
		
		
		<br /><br />
		<button>按钮</button>
	</body>
</html>

在这里插入图片描述