使用jQuery完成表单验证，实现全选、全不选、反选以及提交事件

最新推荐文章于 2024-09-08 21:45:17 发布

Shirley~~

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量516

点赞数 1

分类专栏： js学习文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45866961/article/details/125283466

版权

js学习专栏收录该内容

15 篇文章

订阅专栏

这是一个关于HTML表单的示例，演示了如何使用JavaScript实现全选、全不选和反选功能。用户可以选择足球、篮球、羽毛球或乒乓球作为爱好，并通过点击按钮提交所选项目。此外，代码还包含了点击全选按钮时选中所有选项，全不选按钮取消所有选项，以及反选按钮反转当前选中状态的功能。当用户点击提交按钮时，会弹出警告框显示选定的爱好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			你爱好的运动是？<input type="checkbox" id="checkAllBox" />全选/全不选
			<br/>
			<input type="checkbox" name="items" id="" value="足球" />足球
			<input type="checkbox" name="items" id="" value="" />篮球
			<input type="checkbox" name="items" id="" value="" />羽毛球
			<input type="checkbox" name="items" id="" value="" />乒乓球
			<br>
			<button type="button" id ="checkAllBtn">全选</button>
			<button type="button" id = "checkNoBtn">全不选</button>
			<button type="button" id ="checkRevBtn">反 选</button>
			<button type="button" id ="sendBtn">提交</button>
			<!-- <input type="submit" value=""/> -->
		</form>
		
		<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// 获取全选/全不选复选框
				var $checkAllBox = $('#checkAllBox');
				// var $checkNoBox = $('#checkNoBox');
				// 获取所有爱好按钮
				var $items = $(':checkbox[name = items]');
				// var $items = $('#items')
				// 事件：点击全选按钮，各种球类复选框，点击就选中
				$('#checkAllBtn').click(function(){
					// $items.checked = 'checked';
					$items.prop('checked',true);
					$checkAllBox.prop('checked',true);
				});
				// 全不选事件
				$('#checkNoBtn').click(function(){
					$items.prop('checked',false);
					$checkAllBox.prop('checked',false);
				});
				// 事件 反选按钮
				$('#checkRevBtn').click(function(){
					$items.each(function(){
						this.checked = !this.checked;
					})
					// 定义一个变量用来记录选中数量，如果全部选中，则复选框勾选；反之，取消复选框勾选
					var checkedLength = $items.filter(':checked').length;//filter 根据选择器，获取已有的jQuery对象
					console.log(checkedLength);
					/* if(checkedLength == $items.length){
						// $checkAllBox.checked = !$checkAllBox.checked;
						$checkAllBox.prop('checked',true);
					}else if(checkedLength == 0){
						$checkAllBox.prop('checked',false);
					} */
					$checkAllBox.prop('checked',$items.filter(':checked').length == $items.length);
					$checkAllBox.prop('checked',$items.filter(':not(:checked)').length == 0);
				})
				// 全选/全不选选框事件 
				// 遍历选中的爱好，如果选中的爱好数量等于爱好总数量，则复选框勾选；如果选中的爱好数量为0，则不勾选复选框
				$items.click(function(){
					$checkAllBox.prop('checked',$items.filter(':checked').length == $items.length);
					$checkAllBox.prop('checked',$items.filter(':not(:checked)').length == 0);
				})
			
				// 提交事件 点击sentBtn按钮，根据过滤选择器，选出选中的按钮，然后遍历它们，最后输出这些值
				$('#sendBtn').click(function(){
					$items.filter(':checked').each(function(){
						alert(this.value);
					})
				})
			});

		</script>
	</body>
</html>