JavaScript操作复选框显示/隐藏DIV内容

最新推荐文章于 2024-09-23 15:38:48 发布

万德佛

最新推荐文章于 2024-09-23 15:38:48 发布

阅读量4.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_39251440/article/details/79179969

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="margin-top: 15px">
			<!-- 机种下拉单 -->
			<div name="modelDiv" class="input-group" style="display:none ; margin-top: 7px">
				<div class="input-group-addon">机种</div>
				<select class="form-control" style="text-align: center;" id="modeldata">
					<option value="0" selected="selected">---请选择---</option>
					<option value="1">机种1</option>
					<option value="2">机种2</option>
				</select>
			</div>

			<div name="lineDiv" class="input-group" style="display:none ; margin-top: 7px">
				<div class="input-group-addon">线别</div>
				<select class="form-control" style="text-align: center;" id="line">
					<option value="0" selected="selected">---请选择---</option>
					<option value="1">线别1</option>
					<option value="2">线别2</option>
				</select>
			</div>

			<div name="colorDiv" class="input-group" style="display:none ; margin-top: 7px">
				<div class="input-group-addon">颜色</div>
				 <select class="form-control" style="text-align: center;"  id="color">
					<option value="0" selected="selected">---请选择---</option>
					<option value="1">颜色1</option>
					<option value="2">颜色2</option>
				</select>
			</div>
		</div>

		<div>
			 <label><input name="selectRe" type="checkbox" value="modelDiv">机种</label>
			 <label><input name="selectRe" type="checkbox" value="lineDiv">线别</label>
			 <label><input name="selectRe" type="checkbox" value="colorDiv">颜色</label>
			 <button type="button" onclick="retrievalSubmit()">提交更改</button>
		</div>

	</body>
	<script src="js/jquery.min.js"></script>
	<script>
		function retrievalSubmit() {
			var checkValues = new Array(); /*创建一个数组容器*/
			var ls = $('input[name="selectRe"]'); /*获取复选框*/
			console.log(ls)
			for (var i = 0; i < ls.length; i++) { /*遍历得到value值*/
				if (ls[i].checked) { /*复选框被选中*/
					checkValues[checkValues.length] = ls[i].value;
				}
			}
			$("div[name=modelDiv]").hide();
			$("div[name=lineDiv]").hide();
			$("div[name=colorDiv]").hide(); /*隐藏div*/

			for (var j = 0; j < checkValues.length; j++) { /*遍历输出的复选框的value值*/
				$("div[name=" + checkValues[j] + "]").show(); /*通过获取div的name属性来显示*/
			}
		}
	</script>
</html>

图片说明