用JavaScriptS实现按钮点击全选和根据省份复选框显示对应城市功能

煎蛋zai冒泡

于 2022-09-29 13:56:05 发布

阅读量426

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127105433

版权

写好之后将全选按钮和水果的列表赋予id，然后用JavaScript使全选按钮和列表里的按钮进行绑定操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="selectAll">全选/全不选
		<!-- <input type="checkbox" id="selectAll"> 反选-->
		</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 type="text/javascript">
			//给全选绑定一个单击事件的元素
			document.getElementById("selectAll").onclick = function() {
				//this:指的是当前触发单击事件的元素
				console.log(this.checked)
				//获取当前全选的选中状态
				var isChecked = this.checked
				//获取到所有的水果复选框
				var cbs = document.querySelectorAll(".shop input")
				//通过循环来将全选的状态赋值给水果的复选框
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = isChecked
				}
			}
		</script>

	</body>
</html>

省份

实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能

给两个下拉框设置id并在省份那一个下拉框设置onchange下拉框选中事件，放入功能函数实现这个事件的内容

            <tr>
				<td>家庭住址：</td>
				<td>
					<select name="provin" 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>

		function changeOpt(){
				var cityList=new Array();
				cityList['请选择省份']=['--请选择城市--'];
				cityList['河南省']=['郑州','开封','洛阳','商丘','焦作'];
				cityList['四川省']=['成都','绵阳','德阳','自贡','泸州'];
				//先获取到选中项，也就是选中的省份的值
				var province=document.getElementById("province").value
				for(var i=0;i<cityList[province].length;i++){
					var opt=new Option(cityList[province][i],i)
					document.getElementById("cities").options.add(opt)
				}
			}

煎蛋zai冒泡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JavaScriptS实现按钮点击全选和根据省份复选框显示对应城市功能

给两个下拉框设置id并在省份那一个下拉框设置onchange下拉框选中事件，放入功能函数实现这个事件的内容。写好之后将全选按钮和水果的列表赋予id，然后用JavaScript使全选按钮和列表里的按钮进行绑定操作。
复制链接

扫一扫