控制选中多选框数量

js 控制选中多选框数量

你肯定遇到过一些无理的要求，混口饭吃还真不容易啊，明明是多选框，还要做一个选择数量控制。不过也不难。先写个demo测试一下。

写几个多选框

<div class="form-hobby">
	<label for="c">唱</label> <input id="c" type="checkbox" /><br />
	<label for="t">跳</label> <input id="t" type="checkbox" /><br />
	<label for="rap">rap</label> <input id="rap" type="checkbox" />
</div>

样式

.form-hobby label {
	font-size: 22px;
	color: #868686;
	margin-right: 12px;
	cursor: pointer;
}
.form-hobby input {
	cursor: pointer;
}

逻辑

let hobbies = document.querySelectorAll('.form-hobby input[type="checkbox"]')
let length = 0;
const maxSelection = 2; // 设置最大选择数量
document.querySelector('.form-hobby').addEventListener('click', function (event) {
let target = event.target;
// 检查点击的元素是否是 checkbox
if (target.type === 'checkbox') {
// 检查 checkbox 是否被选中
	if (target.checked) {
		if (length >= maxSelection) {
			console.log('亲，只能选择' + maxSelection + '项');
			target.checked = false; // 取消当前点击的 checkbox
		} else {
			length += 1;
			// 这里可以执行其他操作，例如添加到已选列表等
		}
	} else {
		if (length > 0) {
			length -= 1; 
		}
	}
	console.log('选中的数量:', length);
	}
});