PHP / Javascript限制复选框的数量

时间:2010-05-03 15:30:54

标签: php javascript arrays checkbox onclick

我试图限制可以检查的复选框数量,在这种情况下只能检查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>

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

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

我尝试更改javascript函数中的名称以匹配'复选框'名称。任何建议都将非常感谢

由于

2 个答案:

答案 0 :(得分:0)

在第二个版本中,您的input元素的name是“checkbox []”,但在您的JavaScript函数中,您正在寻找name为{{1}的元素}}。如果您要告诉它查找错误的名称,则JavaScript函数找不到您的字段。

你说你试过改变这个。你试过的时候发生了什么?确保你命名元素“ckb”,而不是“ckb []”。

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

答案 1 :(得分:0)

<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>