您的位置：首页 > Web前端 > JavaScript

javascript限制复选框最多选中几项

2016-01-05 14:20 681 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>限制复选框最多选几项</title>
</head>
<body>
<p>
最多选中<select id="choosenum" onchange="change(this)">
<option value="a" selected>1</option>
<option value="b">2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
<option value="f">6</option>
</select>项
</p>
<p>
<input type="checkbox" name="checkmost">
<input type="checkbox" name="checkmost">
<input type="checkbox" name="checkmost">
<input type="checkbox" name="checkmost">
<input type="checkbox" name="checkmost">
<input type="checkbox" name="checkmost">
</p>
<script>
var  maxnum=1,num= 0,checkboxs=document.getElementsByName("checkmost"),
alength=checkboxs.length,choosenum=document.getElementById("choosenum");
window.onload=function(){
for(var i=0;i<alength;i++){
checkboxs[i].onclick=function(){
if(this.checked){
if(num==maxnum||num>maxnum){
return false;
}
num++;
}
else {
num--;
}
}
}
}
function change(that){
var selectindex=that.selectedIndex;//获得是第几个被选中了
var selectText =that.options[selectindex].text; //获取options中间的文本值
for(var i=0;i<alength;i++){
checkboxs[i].checked=false;
}
maxnum=selectText;
num=0;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航