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

最新推荐文章于 2024-02-19 10:06:30 发布

小王不是程序员

最新推荐文章于 2024-02-19 10:06:30 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/WXS153322/article/details/127097327

版权

JavaScript基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们直接来案例来研究实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能

案例1：下面有两个省份，要求将他们写在下拉列表中，当选择省份好省份时，复选框出现对应省份的城市名（河南：郑州，开封，安阳，洛阳，商丘；河北：邯郸，邢台，石家庄，唐山，保定）

我们先写好HTML里页面的布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select>
			<option>--请选择省份--</option>
			<option>河南省</option>
			<option>河北省</option>
		</select>
		<select>
			<option>--请选择城市--</option>
		</select>
	</body>
</html>

因为城市是实时跟着省份变化而变化，所以我们要在script标签中来进行复选框内容的显示操作，这里我们要给两个下拉框设置id并在省份那一个下拉框设置onchange下拉框选中事件，放入功能函数实现这个事件的内容

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="province" onchange="changeOpt()">
			<option>--请选择省份--</option>
			<option>河南省</option>
			<option>河北省</option>
		</select>
		<select id="cities">
			<option>--请选择城市--</option>
		</select>
		<script>
			function changeOpt() {
				//创建一个数组
				var array = new Array()
				//以二维数组将数组里的省份里分别放入对应省份的城市
				array['--请选择省份--'] = ['--请选择城市--']
				array['河南省'] = ['郑州', '开封', '安阳', '洛阳', '商丘']
				array['河北省'] = ['邯郸', '邢台', '石家庄', '唐山', '保定']
				//获取第一个下拉列表的内容
				var province = document.getElementById("province").value
				//定义变量str用于后面接收数据
				var str = ""
				for (var i = 0; i < array[province].length; i++) {
					//获取每次循环对应省份的二维数组的元素
					str+="<option value='"+array[province][i]+"'>"+array[province][i]+"</option>"
					//将每次获取到的二维数组元素放入下拉列表中
					document.getElementById("cities").innerHTML = str
				}


			}
		</script>
	</body>
</html>

效果演示：

案例二：

请实现一下效果：

第一步还是要把HTML布局写好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
                //将列表前的符号隐蔽
				display: contents;
			}
		</style>
	</head>
	<body>
		<input type="checkbox" id="qx">全选
		<br>
		<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>
	</body>
</html>

我们写好之后顺便将全选按钮和水果的列表赋予id

下面就是要将用JavaScript使全选按钮和列表里的按钮进行绑定操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				display: contents;
			}
		</style>
	</head>
	<body>
		<input type="checkbox" id="qx">全选
		<br>
		<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>
            //使用DOM对象的querySelectorAll方法通过对应选择器获取所有满足条件的标签
			var cbs = document.querySelectorAll(".shop input")
            //给全选按钮设置点击事件
			document.getElementById("qx").onclick = function() {
                获取到当前按钮的状态
				var isChecked = this.checked
                //获取全部input标签
				for (var i = 0; i < cbs.length; i++) {
                    //将全选按钮的状态和列表所有按钮状态绑定在一起
					cbs[i].checked = isChecked
				}
			}
		</script>
	</body>
</html>

现在便能实现一下效果：

我们看到虽然我们可以点击全选按钮全部选中所有水果，但是当我们将全部水果选中后全选按钮并没有被选择上，所有接下来也要让水果按钮全部被选中后，全选按钮也要被选中的状态

思路：当所有水果按钮被选中时，全部选择按钮也是被选中状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				display: contents;
			}
		</style>
	</head>
	<body>
		<input type="checkbox" id="qx">全选
		<br>
		<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>
           //使用DOM对象的querySelectorAll方法通过对应选择器获取所有满足条件的标签
			var cbs = document.querySelectorAll(".shop input")
            //给全选按钮设置点击事件
			document.getElementById("qx").onclick = function() {
                获取到当前按钮的状态
				var isChecked = this.checked
                //获取全部input标签
				for (var i = 0; i < cbs.length; i++) {
                    //将全选按钮的状态和列表所有按钮状态绑定在一起
					cbs[i].checked = isChecked
				}
			}
            //获取全部input标签
			for (var i = 0; i < cbs.length; i++) {
            //给所有input标签添加点击事件
				cbs[i].onclick = function() {
                    //计数器计算被点击的次数
					var count = 0
                    //遍历全部input标签
					for (var j = 0; j < cbs.length; j++) {
                        //判断每个按钮是否被点击
						if (cbs[j].checked) {
                            //如果点击count值自增1
							count++
						}

					}
                    //如果count数值和cbs长度相等，代表所有水果按钮都被选中
					if (count == cbs.length) {
                        //此时使全部选择按钮为被选中的状态
						document.getElementById("qx").checked = true
					} else {
                        //否则使全部选择按钮为被未选中的状态
						document.getElementById("qx").checked = false
					}
				}
			}
		</script>
	</body>
</html>

现在就能实现刚开始看到的效果，代码量一般，要多加练习