本文介绍如何使用JavaScript限制复选框(checkbox)的最大选中数量。通过定义一个全局变量记录当前选中数,并在点击事件中动态判断,当超过设定上限(如6个)时自动取消选中并提示用户,确保前端交互符合业务需求。
JavaScript限制复选框选中数量实现
在开发过程中,遇到需要展示多个复选框但限制最多只能选中6个的场景。经过调试,实现了如下代码方案:
<SCRIPT LANGUAGE="JavaScript">
var c=0,limit=6;
function doCheck(obj) {
obj.checked?c++:c--;
if(c>limit){
obj.checked=false;
alert("over");
c--;
}
}
</SCRIPT>
<html>
<body>
<input type="CHECKBOX" name="sample1" onClick="doCheck(this)">A
<input type="CHECKBOX" name="sample2" onClick="doCheck(this)">B
<input type="CHECKBOX" name="sample3" onClick="doCheck(this)">C
<input type="CHECKBOX" name="sample4" onClick="doCheck(this)">D
<input type="CHECKBOX" name="sample5" onClick="doCheck(this)">E
<input type="CHECKBOX" name="sample6" onClick="doCheck(this)">F
<input type="CHECKBOX" name="sample7" onClick="doCheck(this)">G
<input type="CHECKBOX" name="sample8" onClick="doCheck(this)">H
<input type="CHECKBOX" name="sample9" onClick="doCheck(this)">I
<input type="CHECKBOX" name="sample10" onClick="doCheck(this)">J
</body>
</html>
运行效果如下所示:
