带复选框的表单提交

最新推荐文章于 2021-06-03 08:01:45 发布

白日梦想jun

最新推荐文章于 2021-06-03 08:01:45 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签：复选款提交表单选中复选框提交表单表单提交表单验证 jq

本文链接：https://blog.youkuaiyun.com/oiu1010110/article/details/52997438

Jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个实现用户在提交表单前必须至少选中表格中的一项的交互功能，通过选中除表头外任意行的选项来勾选对应行的复选框，提升了用户体验，并使用jq进行表单验证。

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

实现了：

1.选中除开表头的任何一行中的任何一项，选中该行复选框，有利于用户体验。

2.至少选中表中一项，表单提交。

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>带复选框的表单提交</title>
	<script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script>
	<style type="text/css">
		table {
			border-collapse: collapse;
		}
		td,th {
			width: 40px;
			height: 100px;
			border:1px solid #000;
		}
		table tbody tr:hover {
			background-color: red;
		}
		table tbody tr:not(:first-child):hover {background-color: #666;
		}
	</style>
</head>
<body>
	<form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" onsubmit="return checkShopping();">
		<table id="table" class="fl">
			<thead>
				<tr>
					<th>商品名</th>
					<th>单价</th>
					<th>购买数量</th>
					<th><input id="both" type="checkbox" name="both" autocomplete="off"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>香蕉</td>
					<td>100</td>
					<td>4</td>
					<td>
						<input type="checkbox" name="choice" autocomplete="off">
					</td>
				</tr>
				<tr>
					<td>苹果</td>
					<td>100</td>
					<td>5</td>
					<td>
						<input type="checkbox" name="choice" autocomplete="off">
					</td>
				</tr>
			</tbody>
		</table>
		<input type="submit" id="add_shopping" value="添加购物车"/>
	</form>
	<p id="msg"></p>
</body>
</html>

js:

<script type="text/javascript">
		$(function(){
			//全选
			$("input[name='both']").click(function(){
			var $isSelected = $(this).is(":checked");
			for(var i = 0;i<$("input[name='choice']").length;i++){
				$("input[name='choice']")[i].checked = $isSelected;
				}
			})

			//选中行选中checkbox
		    $("#table tr").slice(1).each(function(){  
	        var This = this;  
	        $(this).children().click(function(){  
	            $($(This).children()[3]).children().each(function(){  
	                if(this.type=="checkbox"){  
	                    if(!this.checked){  
	                       this.checked = true;  
	                    }else{  
	                        this.checked = false;  
	                    }  
	                }  
	            	});  
	        	});  
	    	}); 
		});
		// 有选中才提交
		function checkShopping(){
			$("#msg").html('');
			var $checkbox = $("input[name='choice']");
			for(var i = 0 ;i<$checkbox.length;i++){
				if(checkObj($checkbox[i])){
					return true;
				}
			}
			if(i==$checkbox.length){
				$("#msg").html('提示：至少选择1条信息!');
				return false;
			}
		}
		function checkObj(obj){
			if(obj.checked){
				return true;
			}else{
				return false;
			}
		}

</script>