jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)

最新推荐文章于 2022-01-14 18:07:59 发布

梁同学与Android

最新推荐文章于 2022-01-14 18:07:59 发布

阅读量294

点赞数 1

分类专栏： jQuery 文章标签： jQuery-全选 jQuery全不选 jQuery反选 jQuery-全选、全不选反选 jQuery全选全不选反选

本文链接：https://blog.csdn.net/qq_43290288/article/details/104588856

版权

jQuery 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

代码实例如下:

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'practice_02.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>	
  	你爱好的运动是?<input id="checkAll" type="checkbox"/>全选/全不选<br/>
  	
  	<form>
	  	<input type="checkbox" name="item" value="足球"/>足球
	  	<input type="checkbox" name="item" value="篮球"/>篮球
	  	<input type="checkbox" name="item" value="羽毛球"/>羽毛球
	  	<input type="checkbox" name="item" value="乒乓球"/>乒乓球
	  	<br/>
	  	
	  	<input id="btn1" type="button" value="全选"/>
	  	<input id="btn2" type="button" value="全不选"/>
	  	<input id="btn3" type="button" value="反选"/>
	  	<input id="btn4" type="button" value="提交"/>
  	</form>
  	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript">
	var $checkAll = $('#checkAll');
	var $items = $(':checkbox[name=item]');
	//1.点击'全选'，选中所有爱好
	$('#btn1').click(function() {
		$items.prop('checked',true);
		$checkAll.prop('checked',true);
	});
	//2.点击'全不选'，所有爱好都不勾选
	$('#btn2').click(function() {
		$items.prop('checked',false);
		$checkAll.prop('checked',false);
	});
	
	//3.点击'反选'，改变所有爱好的勾选状态
	$('#btn3').click(function() {
		$items.each(function() {
			this.checked = !this.checked;
		});
		//统计没有被选中的个数，如果是0的话
		$checkAll.prop('checked',$items.not(':checked').length==0);
	});
	
	//4.点击'提交'，提示所有勾选的爱好
	$('#btn4').click(function() {
		$items.filter(':checked').each(function() {
			alert(this.value);//this指的是当前被选中的DOM元素
		});
	});
	//5.点击'全选/全不选’，选中所有爱好，或者全不选中
	$checkAll.click(function() {
		$items.prop('checked',this.checked);
	});
	//6.点击某个爱好时，必要时更新‘全选/全不选’的选中状态
	$items.click(function() {
		$checkAll.prop('checked',$items.not(':checked').length==0);
	});
	
	</script>
  </body>
</html>

界面效果如下:

在这里插入图片描述

测试的话，请读者复制代码自行验证

梁同学与Android

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)

代码实例如下:<html> <head> <base href="<%=basePath%>"> <title>My JSP 'practice_02.jsp' starting page</title> <meta http-equiv="pragma" content="n...
复制链接

扫一扫