PHP/Javascript 限制复选框的数量答案

【问题标题】：PHP/Javascript limiting amount of checkboxesPHP/Javascript 限制复选框的数量
【发布时间】：2010-05-03 15:30:54
【问题描述】：

我试图限制可以选中的复选框的数量，在这种情况下只能选中 3 个。当使用纯 HTML 时，这可以正常工作。代码如下。

HTML 示例

<td ><input type=checkbox name=ckb value=2 onclick='chkcontrol()';></td><td>Perl</td>

Javascript 函数

<script type="text/javascript">  
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 > 3){  
alert("Please Select only three")       
document.form1.ckb[j].checked = false;  
return false;
}  
}    
}  
</script>

将固定的 HTML 值替换为 MYSQL 数据库中的值时会出现问题。所有信息都正确显示，并且可以通过提交按钮发布到另一个页面。但是，似乎分配给数据库中每条记录的“值”并没有成为 javascript 函数。

<td><input name="checkbox[]" type="checkbox" value="<?php echo $rows['TCA_QID'];?>" onclick="chkcontrol();"></td>

我已尝试更改 javascript 函数中的名称以匹配“复选框”名称。任何建议将不胜感激

谢谢

【问题讨论】：

你的函数声明有一个参数：你的函数调用中缺少它。您是否尝试显示生成的源代码？
我只是讨厌未缩进的代码.......不会计算。

标签： php javascript arrays checkbox onclick

【解决方案1】：

在第二个版本中，您的 input 元素的 name 是“checkbox[]”，但在您的 JavaScript 函数中，您正在寻找具有 name 的 ckb 的元素。如果您告诉 JavaScript 函数查找错误名称，则 JavaScript 函数无法找到您的字段。

您说您尝试过更改此设置。当你尝试这样做时发生了什么？确保您将元素命名为“ckb”，而不是“ckb[]”。

您是否查看过为页面生成的 HTML 中复选框的值是什么？它们符合您的预期吗？

【讨论】：

感谢您的回复，对不起，我没有说得更清楚，不想插入更多代码。我将其更改为复选框，但是当提示超过 3 个复选框时，没有出现警报。然后我将其更改为 checkbox[] 但再次没有任何区别。是的，价值观完全按照他们应该的方式出现。我取出大部分功能只是为了确保 onclick 正在工作并且一个简单的警报工作 - 所以我猜测“total”变量在单击复选框时不会增加
您的 JavaScript 代码引用了document.form1.ckb[i]。因此，您的 input 元素需要具有名称 ckb，而不是 checkbox 和 checkbox[]。

【解决方案2】：

<script type="text/javascript">
<!--
//initial checkCount of zero
var checkCount=0

//maximum number of allowed checked boxes
var maxChecks=3

function setChecks(obj){
//increment/decrement checkCount
if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}
//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert
if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('you may only choose up to '+maxChecks+' options')
}
}
//-->
</script>

</head>

<body>
<form>
Option1 <input type="checkbox" id="check1" onclick="setChecks(this)"><br />
Option2 <input type="checkbox" id="check2" onclick="setChecks(this)"><br />
Option3 <input type="checkbox" id="check3" onclick="setChecks(this)"><br />
Option4 <input type="checkbox" id="check4" onclick="setChecks(this)"><br />
Option5 <input type="checkbox" id="check5" onclick="setChecks(this)"><br />
Option6 <input type="checkbox" id="check6" onclick="setChecks(this)"><br />

</form>
</body>

【讨论】：