複選框警報，選擇最多4個項目

Question

我有一個複選框的表單。最多需要選擇4個項目。如果選擇更多，則彈出警報。當我使用相同的名稱=「」時，我有它的工作，但真的需要不同。任何人都知道如何做到這一點？

我的腳本：（CKB必須CKB1 + CKB2 + ckb3 ...）

function chkcontrol(j) { 
    var total=0; 
    for(var i=0; i < document.form1.ckb.length; i++){ 
     if(document.form1.ckb[i].checked){ 
      total =total +1;} 
     if(total > 4){ 
      alert("Selecteer a.u.b. maximaal 4 workshops") 
      document.form1.ckb[j].checked = false ; 
      return false; 
     } 
    } 
} 

我的表單的html代碼：

<form enctype="application/x-www-form-urlencoded" method="post" name="form1"> 
<span>Workshops selection: (max 4)</span><br><br> 

<input type="checkbox" name="ckb1" value="blabla first" onclick='chkcontrol(0)'; /> blabla first<br> 
<input type="checkbox" name="ckb2" value="blabla 2" onclick='chkcontrol(1)'; /> blabla 2<br> 
<input type="checkbox" name="ckb3" value="blabla 3" onclick='chkcontrol(2)'; /> blabla 3<br> 
<input type="checkbox" name="ckb4" value="blabla 4" onclick='chkcontrol(3)'; /> blabla 4<br> 
<input type="checkbox" name="ckb5" value="blabla 5" onclick='chkcontrol(4)'; /> blabla 5<br> 
<input type="checkbox" name="ckb6" value="blabla 6" onclick='chkcontrol(5)'; /> blabla 6<br> 
<input type="checkbox" name="ckb7" value="blabla 7" onclick='chkcontrol(6)'; /> blabla 7<br> 

<input class="btn" class="cursor" name="Sent" type="submit" value="Sent" /> 
</form> 

我的小提琴：https://jsfiddle.net/usq2aeLL/1/

工作一，但需要不同的名稱=「xxx」：https://jsfiddle.net/usq2aeLL/2/

Answer 1

使用公共cl屁股，選擇元素，而不是

<input type="checkbox" name="ckb1" class="myBox" value="blabla first" /> 

然後

function chkcontrol() { 
    var total = 0; 
    var elems = document.querySelectorAll('.myBox'); 

    for (var i = 0; i < elems.length; i++) { 
     if (elems[i].checked) { 
      total = total + 1; 
     } 
     if (total > 4) { 
      alert("Selecteer a.u.b. maximaal 4 workshops") 
      elems.checked = false; 
      return false; 
     } 
    } 
} 

FIDDLE

最好你換出內嵌事件處理程序與addEventListener爲好。