带数据验证和复选框的表单提交

最新推荐文章于 2023-05-09 09:38:49 发布

白日梦想jun

最新推荐文章于 2023-05-09 09:38:49 发布

阅读量1.5k

点赞数

分类专栏： Jquery 文章标签：带数据验证和复选框的表单提交表单提交 Jquery 表单验证

本文链接：https://blog.csdn.net/oiu1010110/article/details/53001756

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现：

1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。

2.选中该行任意项就选中该行的复选框，参见上篇http://blog.csdn.net/oiu1010110/article/details/52997438

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;
		}
		td input[name='number']{
			width: 100px;
		}
	</style>
</head>
<body>
	<form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" οnsubmit="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><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td>
					<td>
						<input type="checkbox" name="choice" autocomplete="off">
					</td>
				</tr>
				<tr>
					<td>苹果</td>
					<td>100</td>
					<td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></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;
					}
				})

		});

		// 输入正确，且有选中该行复选框才提交
		function checkShopping(){
			$("#msg").html('');
			var $checkbox = $("input[name='choice']");
			var reg = /^[1-9]\d*$/;
			var $number = "";
			var isInteger = false;//记录数字是否正确
			var moreOne = false;//选择复选框个数

			$checkbox.each(function(){
				if($(this).is(":checked")){
					$number = $(this).parent().prev().children().val();
					if(reg.test($number)){
						isInteger = true;
						moreOne = true;
					}else{
						$("#msg").html('提示：输入数量必须为正整数');
						isInteger = false;
					}
				}
			})

			if(isInteger && moreOne){
				return true;
			}else if(!moreOne){
				$("#msg").html('提示：至少选择一条信息');
				return false;
			}else{
				return false;
			}
		}

</script>