我已经有了这段代码:
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 />
可以这样做:
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
被阻止(而不是手动取消选中复选框,我认为无论如何都可以正常工作)。
- https://developer.mozilla.org/en-US/docs/DOM/Element.querySelectorAll
您需要方括号符号来使用对象键的字符,这些字符不是有效的标识符。
for(var i=0; i < document.contactForm["qualities[]"].length; i++){
这允许任何有效的字符串用作键,而标识符语法将限制您使用字母,数字,_
和$
。
您可以使用document.contactForm['qualities[]']
使用name="qualities[]"