本文介绍如何使用 JavaScript 判断复选框的选中状态并统计选中个数。通过遍历 checkbox 元素的 checked 属性计算总数,当选中数量超过预设最大值时,弹出提示并取消最新选中项,从而实现简单的多选数量限制功能。
JavaScript 实现复选框选中状态判断与数量限制
利用 JavaScript 可以判断复选框的选中状态并统计选中的个数。针对复选框选中情况的问题,这段代码提供了有效的解决方案,它不仅能够识别哪些复选框被选中,还可以统计选中的具体数量。如果用户选择的复选框数量超过限制,系统会弹出提示信息进行提醒。
核心代码逻辑与 HTML 结构
<HTML>
<head>
<title>判断复选框是否选中及选中个数</title>
<SCRIPT LANGUAGE="JavaScript">
function countChoices(obj) {
max = 2;
box1 = obj.form.box1.checked;
box2 = obj.form.box2.checked;
box3 = obj.form.box3.checked;
count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0);
if (count > max) {
alert("对不起,你只能选择" + max + "个!");
obj.checked = false;
}
}
//-->
</script>
<body>
<form name="form">
你喜欢的语言是(最多两个): <p>
<input type=checkbox name=box1 onClick="countChoices(this)">ASP.NET<p>
<input type=checkbox name=box2 onClick="countChoices(this)">JAVA<p>
<input type=checkbox name=box3 onClick="countChoices(this)">C#<p>
</form>
</body>
</html>
以上介绍了利用 JavaScript 判断复选框选中状态及统计个数的实现方法,供读者参考。