- 原生的js控制复选框限制个数
javascript代码:
var limit = 3,num = 0;
function check(obj) {
obj.checked?num++:num--;
if(num > limit){
obj.checked = false;
alert("最多选择3项");
num--;
}
};
html代码:
<input type="checkbox" name="check1" id="" onclick="check(this)">上网<br />
<input type="checkbox" name="check1" id="" onclick="check(this)">买菜<br />
<input type="checkbox" name="check1" id="" onclick="check(this)">旅游<br />
<input type="checkbox" name="check1" id="" onclick="check(this)">电影<br />
<input type="checkbox" name="check1" id="" onclick="check(this)">唱歌<br />
<input type="checkbox" name="check1" id="" onclick="check(this)">阅读<br />
缺点:每个复选框都需要添加click事件,方法复用性不好,没办法为复选框分组。
- 根据name属性分组,动态指定分组、限制个数
js代码:
function autoCheck(name,limit){
var cks = document.getElementsByName(name);
function check() {
var checkedNum = 0;
for (var i = 0,len = cks.length; i < len ;i++) {
if(cks[i].checked) checkedNum++;
if(checkedNum > limit) {
return false;
}
}
return true;
}
for (var i = 0,len = cks.length; i < len ;i++) {
cks[i].onclick = function (){
if(!check()){
alert("最多选择"+limit+"个");
this.checked = false;
}
}
}
};
autoCheck("check1",3);
autoCheck("check2",3);
html代码:
<p>name= check1</p>
<input type="checkbox" name="check1" id="">上网<br />
<input type="checkbox" name="check1" id="">买菜<br />
<input type="checkbox" name="check1" id="">旅游<br />
<input type="checkbox" name="check1" id="">电影<br />
<input type="checkbox" name="check1" id="">唱歌<br />
<input type="checkbox" name="check1" id="">阅读<br />
<p>name= check2</p>
<input type="checkbox" name="check2" id="">上网<br />
<input type="checkbox" name="check2" id="">买菜<br />
<input type="checkbox" name="check2" id="">旅游<br />
<input type="checkbox" name="check2" id="">电影<br />
<input type="checkbox" name="check2" id="">唱歌<br />
<input type="checkbox" name="check2" id="">阅读<br />
特点:可以根据name属性对复选框进行分组,并可分别设置每组可选个数;