Предупреждение по галочке, выберите максимум 4 элемента

Question

У меня есть форма с флажками. Необходимо выбрать максимум 4 элемента. Если вы выберете больше, появится сообщение Alert. У меня он работает, когда я использую одно и то же имя = "", но это действительно должно быть другим. Кто-нибудь знает, как это сделать?

Сценарий у меня есть: (ЦКБ должен быть 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, а также.