1

我已经有了这个代码：

function chkcontrol(j) {
    var total=0;
    for(var i=0; i < document.contactForm.qualities.length; i++) {
        if(document.contactForm.qualities[i].checked) {
            total =total +1;}
            if(total > 2) {
                alert("Please Select only 2")
                document.contactForm.qualities[j].checked = false ;
                return false;
             }
        }
    }
}

它工作正常，但是当我把name="qualities[]"括号放在它不再工作时。尝试将 [] 添加到： for(var i=0; i < document.contactForm.qualities.length; i++){

返回错误。

在这里编辑是我的相关 HTML：

<form name="contactForm" method="post" action="{$contact_action}" id="newform">
<table width="100%" cellpadding="0" cellspacing="0" id="cfCSF">
    <label><input type="checkbox" name="qualities[]" value="value" onclick="chkcontrol(0)"/> value</label><br />
    <label><input type="checkbox" name="qualities[]" value="value" onclick="chkcontrol(1)"/>value</label><br />
    <label><input type="checkbox" name="qualities[]" value="value" onclick="chkcontrol(2)"/> value</label><br />
    <label><input type="checkbox" name="qualities[]" value="value" onclick="chkcontrol(3)"/> value</label><br />
    <label><input type="checkbox" name="qualities[]" value="value" onclick="chkcontrol(4)"/> value</label><br /><br />
4

3 回答 3

1

一个选项是使用这个：

function chkcontrol(j) {
    var total = 0;
    var chk = document.getElementById("newform").querySelectorAll('input[name="qualities[]"]');
    for (var i = 0; i < chk.length; i++) {
        var cur = chk[i];
        if (cur.checked) {
            total++;
            if (total > 2) {
                alert("Too many checked");
                chk[j].checked = false;
                break;
            }
        }
    }
}

演示：http: //jsfiddle.net/zz395/

另一种选择是更好地组织所有内容并保持 Javascript 不显眼，是使用以下内容：

window.onload = function () {
    var chk = document.getElementById("newform").querySelectorAll('input[name="qualities[]"]');
    for (var i = 0; i < chk.length; i++) {
        var cur = chk[i];
        addEvent(cur, "click", clickHandler);
    }
};

function clickHandler(e) {
    var total = 0;
    var chk = document.getElementById("newform").querySelectorAll('input[name="qualities[]"]');
    for (var i = 0; i < chk.length; i++) {
        var cur = chk[i];
        if (cur.checked) {
            total++;
            if (total > 2) {
                alert("Too many checked");
                preventDefault(e);
                break;
            }
        }
    }
}

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

演示：http: //jsfiddle.net/zz395/2/

（其中 HTML 没有onclick为复选框定义任何内容）

我更喜欢这种设置，因为您不需要对复选框的索引进行硬编码，这event是被阻止的（而不是手动取消选中复选框，我认为无论如何都可以正常工作）。

参考：

于 2013-04-25T16:28:57.920 回答
1

您需要方括号表示法来使用带有无效标识符字符的对象键。

for(var i=0; i < document.contactForm["qualities[]"].length; i++){

这允许将任何有效字符串用作键，而标识符语法将限制您使用字母、数字_和$.

于 2013-04-25T16:32:59.983 回答
0

您可以使用document.contactForm['qualities[]']选择表单元素列表name="qualities[]"

于 2013-04-25T16:30:30.293 回答