JavaScript实现Checkbox最多选中6个的限制功能

作者:闭包旅人

时间:2026-10-28

浏览:442

本文介绍如何使用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>

运行效果如下所示: JavaScript限制复选框选中数量实现

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章