复选框警报，选择最多4项。

Question

我有一张带有复选框的表格。最多4项需要选择。如果选择更多，则会弹出警报。当我使用相同的name=时，我会让它工作“，但这确实需要改变。有人知道怎么做吗？

我拥有的脚本：(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/

工作，但需要不同的name="xxx"：https://jsfiddle.net/usq2aeLL/2/

Answer 1

使用公共类来选择元素。

<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交换内联事件处理程序。