总结九月二十七号

最新推荐文章于 2024-07-15 22:27:18 发布

qq_67507026

最新推荐文章于 2024-07-15 22:27:18 发布

阅读量56

点赞数

文章标签： java servlet mybatis

本文链接：https://blog.csdn.net/qq_67507026/article/details/127074579

版权

展示的表格

在代码中实现下拉列表框和提交注册成功等

<table border="" cellspacing="" cellpadding="">
						<tr>
							<td>账户：</td>
							<td>
								<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
							</td>
							<td>
								<label id="msg1"></label>
							</td>
						</tr>
						<tr>
							<td>密码：</td>
							<td>
								<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
							</td>
							<td>
								<label id="msg2"></label>
							</td>
						</tr>
						<tr>
							<td>确认密码：</td>
							<td>
								<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
							</td>
							<td>
								<label id="msg3"></label>
							</td>
						</tr>
						<tr>
							<td>家庭住址：</td>
							<td>
								<select name="province" id="province" onchange="changeOpt()">
									<option value="请选择省份">--请选择省份--</option>
									<option value="河南省">--河南省--</option>
									<option value="山东省">--山东省--</option>
								</select>
								<select name="cities" id="cities">
									<option value="请选择城市">--请选择城市--</option>
								</select>
									
							</td>
							<td>
								
							</td>
						</tr>
						<tr>
							<td colspan="3" align="center">
								<input type="button" id="btn" value="提交" />
							</td>
						</tr>
					</table>
				<div id="result">
					
				</div>

实现下拉框与提交判断成功

function changeOpt(){
						var cityList = new Array();
						cityList['请选择省份'] = ['--请选择城市--'];
						cityList['河南省'] = ['郑州','开封','南阳'];
						cityList['山东省'] = ['枣庄','临沂','菏泽'];
						//获取省份
						var province = document.getElementById("province").value
					
					//将下拉列表项清空
					document.getElementById("cities").options.length=0
					for(var i=0;i<cityList[province].length;i++){
						var opt = new Option(cityList[province][i],cityList[province][i])
						document.getElementById("cities").options.add(opt)
					}
					}
					//提交
					document.getElementById("btn").onclick=function(){
						if(checkUname()&&checkPwd(1)&&checkEquals()){
							alert("注册成功")
						}else{
							alert("注册失败")
						}
					}

全选与取消的多选

<style type="text/css">
			ul(list-style: none;)
		</style>
	</head>
	<body>
		<p>
			<input type="checkbox" name="" id="selectAll" value="" />全选/取消全选
		</p>
		<hr >
		<ul class="shop">
			<li><input type="checkbox" />苹果</li>
			<li><input type="checkbox" />梨</li>
			<li><input type="checkbox" />葡萄</li>
			<li><input type="checkbox" />香蕉</li>
			<li><input type="checkbox" />橘子</li>
		</ul>
		<script>
			var asd = document.querySelectorAll(".shop input")
			document.getElementById("selectAll").onclick=function(){
				var isChecked=this.checked
				for(var i = 0;i<asd.length;i++){
					asd[i].checked=isChecked
				}
			}
			
			for(var i=0;i<asd.length;i++){
				asd[i].onclick=function(){
					var count=0
					for(var j=0; j<asd.length;j++){
						if(asd[j].checked){
							count++
						}
					}
					if(count==asd.length){
						document.getElementById("selectAll").checked=true
					}else{
						document.getElementById("selectAll").checked=false
					}
				}
			}
			
		</script>
	</body>