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属性对复选框进行分组，并可分别设置每组可选个数；