アプリケーションシナリオ:複数選択ボックスの数を制限する場合に使用されます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="ball" id="">足球
<input type="checkbox" name="ball" id="">篮球
<input type="checkbox" name="ball" id="">排球
<input type="checkbox" name="ball" id="">羽毛球
<input type="checkbox" name="ball" id="">乒乓
<p>选择(最多三项)</p>
<script>
var ipts = document.querySelectorAll("input");
console.log(ipts);
for (var j = 0; j < ipts.length; j++) {
ipts[j].onclick = function() {
var count = 0;
for (var i = 0; i < ipts.length; i++) {
console.log(ipts.checked);
if (ipts[i].checked == true) {
count++;
}
}
if (count > 3) {
alert('只能选三个');
return false;
}
}
}
</script>
</body>
</html>