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

使用公共类来选择元素

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

复选框提醒，选择最多4项

1 个答案: