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コード:

type="checkbox" name="check1" id="" onclick="check(this)">  

type="checkbox" name="check1" id="" onclick="check(this)">  

type="checkbox" name="check1" id="" onclick="check(this)">  

type="checkbox" name="check1" id="" onclick="check(this)">  

type="checkbox" name="check1" id="" onclick="check(this)">  

type="checkbox" name="check1" id="" onclick="check(this)">  

短所:各チェックボックスは、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= check1p>
<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= check2p>
 <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属性に従って、チェックボックスをグループ化し、それぞれのグループのオプション数を設定できます.