javascript表单注册批量删除单选复选全选

最新推荐文章于 2022-10-10 02:31:36 发布

G_Sun_Q

最新推荐文章于 2022-10-10 02:31:36 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/G_Sun_Q/article/details/78516657

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	td {
	text-align: center;
	}
	</style>
	<script src="../js/jquery-1.11.0.js"></script>
	<script>
	$(function() {
	var arr = [
	["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]
	,
	["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]
	,
	["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]
	,
	["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]
	];
	var flag1 = false;
	var flag2 = false;
	var flag3 = false;
	var flag4 = false;
	//获取元素
	var $name = $("#name");
	var $pwd = $("#pwd");
	var $age = $("#age");
	var $city = $("#city");

	$name.blur(function() {
	if($name.val() == "") {
	alert("请输入用户名");
	flag1 = false;
	} else {
	flag1 = true;
	}
	});

	$pwd.blur(function() {
	var $pl = $pwd.val().length;
	if($pl > 4 && $pl < 16) {
	flag2 = true;
	} else {
	alert("长度在4-16位之间");
	flag2 = false;
	}
	});

	$age.blur(function() {
	if($age.val() < 1 \|\| $age.val() > 300) {
	alert("请输入正确的年龄");
	flag3 = false;
	} else {
	flag3 = true;
	}
	});

	$city.change(function(){
	$("#city2 option").remove();
	var ind = $(this).val();
	alert(ind);
	for(c in arr[ind]){
	var $c2 = $("#city2");
	var cs = $("<option>"+arr[ind][c]+"</option>");
	$c2.append(cs);
	}
	});


	//提交按钮点击事件
	$("#tj").click(function() {

	if(flag1 && flag2 && flag3){
	var $nameV = $("#name").val();
	var $pwdV = $("#pwd").val();
	var $ageV = $("#age").val();
	var $sexV = $("input[name='sex']:checked").val();
	var $cityV = $("#city option:selected").html();
	var $city2V = $("#city2 option:selected").html();
	var $data = $("#data");
	var $a = $("<tr><td><input type='checkbox'></td><td>"+$nameV+"</td><td>"+$pwdV+"</td><td>"+$ageV+"</td><td>"+$sexV+"</td><td>"+$cityV+"-"+$city2V+"</td></tr>");
	$data.append($a);

	}else{
	alert("请按要求输入信息");
	}
	});

	});
	</script>
	<!--全选，全不选-->
	<script>
	//页面加载完成
	$(function(){
	//选中全选
	$("#all").click(function(){
	//判断状态
	var fl = $(this).prop("checked");
	if(fl){
	//全选
	var $ch = $(":checkbox");
	$ch.each(function(index, element) {
	$ch[index].checked=true;
	});
	}else{
	//全不选
	var $ch = $(":checkbox");
	$ch.each(function(index, element) {
	$ch[index].checked=false;
	});
	}
	});
	//批量删除，点击删除，删除选中的元素
	$("#del").click(function(){
	//data表格下有是checked且没有id属性的都删除
	$("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


	})


	});
	</script>
	</head>

	<body>
	<center>
	<h2>用户注册</h2>
	<table border="1px" cellpadding="10px" cellspacing="0px">
	<tr>
	<td>用户名</td>
	<td><input type="text" placeholder="用户名不能为空" id="name" /></td>
	</tr>
	</tr>
	<td>密　码</td>
	<td><input type="password" placeholder="长度在4-16位之间" id="pwd" /></td>
	</tr>
	</tr>
	<td>年　龄</td>
	<td><input type="number" placeholder="年龄必须是数字" id="age" /></td>
	</tr>
	</tr>
	<td>性　别</td>
	<td><input type="radio" value="男" name="sex" checked="checked"/>男
	<input type="radio" value="女" name="sex" />女</td>
	</tr>
	<tr>
	<td>住　址</td>
	<td>省
	<select id="city">
	<option value=0>北京</option>
	<option value=1>上海</option>
	<option value=2>天津</option>
	<option value=3>重庆</option>
	</select>
	市
	<select id="city2">
	<option>东城区</option>
	</section>
	</td>
	</tr>
	<tr>
	<td colspan="2"><button id="tj">提交</button></td>
	</tr>
	</table>
	<button id="del">批量删除</button>
	<table border="1px" cellpadding="10px" cellspacing="0px" id="data">
	<tr>
	<td><input type="checkbox" id="all"></td>
	<td>用户名</td>
	<td>密　码</td>
	<td>年　龄</td>
	<td>性　别</td>
	<td>住　址</td>
	</tr>

	</table>
	</center>
	</body>

	</html>