button同时多选，同时取消选择_css控制多选button-优快云博客

本文链接：https://blog.youkuaiyun.com/u010869754/article/details/50039995

这篇博客介绍了如何使用CSS和JavaScript实现多个按钮（实际上为checkBox）的多选功能，允许用户同时选中并能随时取消选中状态。内容包括不同状态的视觉展示（未选中和选中）以及相关的CSS代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要实现多个按钮同时被选中，并可随时取消选中，此处的按钮实质为checkBox

图1：展示按钮未被选中

图2：展示按钮被选中

CSS代码

                .dayCheck {
			background: #1B9AF7;
			width: 50px;
			height: 40px;
			border-radius: 5px;
			color: #FFFFFF;
		      }
		.dayUnCheck {
			background: #90C7F0;
			width: 50px;
			height: 40px;
			border-radius: 5px;
			color: #FFFFFF;
		}
		.dayCheckBox {
			width: 100%;
			height: 100%;
			margin: -10px 0px 0px;
			opacity: 0;
		}
		.dayTxt {
			margin: 0px;
			height: 0px;
			font-size: 20px;
			padding-top: 10px;
			width: 100%;
			text-align: center;
		}
		section{
			width: 50px;
			float: left;
			margin: 1px;
		}
		.dayCheckTest+ input:checked{
		.dayCheckTest	{
				background:red;
			}
		}

html代码：

<body>
		<section>
			<div id="dayCheck1" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day1</p>
				<input class="dayCheckBox"  type="checkbox"  name="" id="day1"  />
				<label for="day1"></label>
			</div>
		</section>

		<section >
			<div id="dayCheck2" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day2</p>
				<input type="checkbox" class="dayCheckBox" name="" id="day2" />
				<label for="day1"></label>
			</div>
		</section>

		<section>
			<div id="dayCheck3" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day3</p>
				<input  type="checkbox" class="dayCheckBox" name="" id="day3"  />
				<label for="day1"></label>
			</div>
		</section>

		<section>
			<div id="dayCheck4" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day4</p>
				<input type="checkbox" class="dayCheckBox" name="" id="day4" value="option1" />
				<label for="day1"></label>
			</div>
		</section>

		<section >
			<div id="dayCheck5" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day5</p>
				<input type="checkbox" class="dayCheckBox" name="" id="day5"  />
				<label for="day1"></label>
			</div>
		</section>

		<section >
			<div id="dayCheck6" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day6</p>
				<input  type="checkbox" class="dayCheckBox" name="" id="day6" />
				<label for="day1"></label>
			</div>
		</section>

		<section>
			<div id="dayCheck7" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day7</p>
				<input  type="checkbox" class="dayCheckBox" name="" id="day7" />
				<label for="day1"></label>
			</div>
		</section>

		<section>
			<div id="dayCheck8" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day8</p>
				<input type="checkbox" class="dayCheckBox" name="" id="day8"  />
				<label for="day1"></label>
			</div>
		</section>

		<section>
			<div id="dayCheck9" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day9</p>
				<input type="checkbox" class="dayCheckBox" name="" id="day9" value="option1"  />
				<label for="day1"></label>
			</div>
		</section>

		<section>
			<div id="dayCheck10" class="dayCheck dayCheckDiv">
				<p class="dayTxt">day10</p>
				<input  type="checkbox" class="dayCheckBox" name="" id="day10" value="option1" />
				<label for="day1"></label>
			</div>
		</section>

	</body>

JS代码

<script type="text/javascript">
	$("input").click(function() {
	       $("div").each(function(){
				if ($(this).children('input').is(":checked")) {
					$(this).removeClass("dayCheck").addClass("dayUnCheck");	
				} else {							
					$(this).removeClass("dayUnCheck").addClass("dayCheck");
				}
			});
	});
</script>