用JavaScript实现按钮点击全选/全不选和下拉列表根据省份选择城市显示复选框

爱吃汉堡的代码人

已于 2022-10-09 21:28:25 修改

阅读量925

点赞数

文章标签： javascript java 前端

于 2022-10-07 22:25:51 首次发布

本文链接：https://blog.csdn.net/weixin_67224308/article/details/127200241

版权

这篇博客介绍了如何使用JavaScript实现两种功能：一是通过按钮实现全选/全不选的功能，确保全选按钮的状态与列表中所有选项同步；二是利用下拉列表选择省份，动态显示对应城市的选择复选框，具体实现涉及HTML布局和JavaScript事件绑定。

摘要由CSDN通过智能技术生成

一、按钮点击全选/全不选

第一步先写一个HTML布局。

在body内写。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<input type="checkbox" name="" id="selectAll" value="" />全选/全不选
		<!-- <input type="checkbox" name="" id="selectReverse" 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"/>HelloKitty</li>
			</ul>
			
	</body>
</html>

将全选按钮和玩偶列表都设id。

用JavaScript使全选按钮和列表里的按钮进行绑定操作。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<input type="checkbox" name="" id="selectAll" value="" />全选/全不选
		<!-- <input type="checkbox" name="" id="selectReverse" 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"/>HelloKitty</li>
			</ul>
			<script type="text/javascript">
				//给全选绑定一个单击事件
				document.getElementById("selectAll").onclick = function(){
					//this:指的是当前触发单击事件的元素
					conso