我已经准备好了这段代码:
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
)
我更喜欢这种设置,因为您不需要对复选框的索引进行硬编码,事件
被阻止(而不是手动取消选中复选框,我认为无论如何都可以正常工作)。
引用:
关于php - 只选择 Javascript 中的一些复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16219981/