JS控制复选框限制个数及分组

  • 原生的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属性对复选框进行分组,并可分别设置每组可选个数;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值