Javascript 限制用户在PHP中选择的复选框数_Javascript_Validation_Forms

Javascript 限制用户在PHP中选择的复选框数

javascript validation forms

Javascript 限制用户在PHP中选择的复选框数,javascript,validation,forms,Javascript,Validation,Forms,我创建了下面的表，它为用户提供了使用复选框进行选择的选项。我把选择的数量限制在四个，但它选择了四个以上的选择 HTML: 生物心理上的社交抗抑郁药抗精神病口服药抗精神病药仓库抑压药苯二氮卓情绪稳定剂发射型计算机断层扫描仪其他用于检查选择数的脚本： function chkcontrol(j) { var total = 0; for (var i = 0; i < document.form1.ckb.length; i++) {

我创建了下面的

表

，它为用户提供了使用复选框进行选择的选项。我把选择的数量限制在四个，但它选择了四个以上的选择

HTML:


生物
心理上的
社交
抗抑郁药
抗精神病口服药
抗精神病药仓库
抑压药
苯二氮卓
情绪稳定剂
发射型计算机断层扫描仪
其他

用于检查选择数的脚本：

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

功能chkcontrol（j）{
var合计=0；
for（var i=0；i4）{
警报（“请仅选择三个”）
document.form1.ckb[j].checked=false；
返回false；
}
}
}

以下是一个屏幕截图：

经过几次轻微修正后：

<html>
<head>
<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 > 4){
            alert("Please Select only four!")
            document.form1.ckb[j].checked = false ;
            return false;
        }
    }
}
</script>

</head>
<body>
<table width="100%" border="0">
    <form action="" id="form1" name="form1">
            <tr>
              <th width="37%" height="19" align="center" bgcolor="#CCCCCC"><strong>Biological</strong></th>
              <th width="37%" align="center" bgcolor="#CCCCCC"><strong> Psychological</strong></th>
              <th width="37%" align="center" bgcolor="#CCCCCC"><strong> Social</strong></th>
            </tr>
            <tr>
              <td><input type="radio" name="Antidepressant" id="ckb" value="Antidepressant" onclick="chkcontrol(0);" />
                <label for="Antidepressant"></label>Antidepressant</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Antipsychotic oral" id="ckb" value="Antipsychotic oral" onclick="chkcontrol(1);" />
                <label for="Antipsychotic oral"></label>Antipsychotic oral</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Antipsychotic_depot" id="ckb" value="Antipsychotic depot" onclick="chkcontrol(2);" />
                <label for="Antipsychotic depot"></label>Antipsychotic depot</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Bblocker" id="ckb" value="B-blocker"  onclick="chkcontrol(3);"/>
                <label for="B-blocker"></label>B-blocker</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Benzodiazepine" id="ckb" value="Benzodiazepine"  onclick="chkcontrol(4);"/>
                <label for="Benzodiazepine"></label>Benzodiazepine</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Mood_stabiliser" id="ckb" value="Mood stabiliser"  onclick="chkcontrol(5);"/>
                <label for="Mood stabiliser"></label>Mood stabiliser</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="ECT" id="ckb" value="ECT"  onclick="chkcontrol(6);"/>
                <label for="ECT"></label>ECT</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Otherbio" id="ckb" value="Other"  onclick="chkcontrol(7);"/>
                <label for="Other"></label>
                Other</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
        </form>
    </table>
</body>
</html>


功能CHKC控制（j）{
var合计=0；
for（var i=0；i4）{
警报（“请仅选择四个！”）
document.form1.ckb[j].checked=false；
返回false；
}
}
}
生物
心理上的
社交
抗抑郁药
抗精神病口服药
抗精神病药仓库
抑压药
苯二氮卓
情绪稳定剂
发射型计算机断层扫描仪
其他

尽管如此，它还是没有意义，因为表单没有在任何地方提交其内容，但它是一个很好的POC。

但是脚本不起作用，允许用户选择4个以上的选项PHP与此有什么关系？这是唯一的javascript。对于初学者来说，这些是单选按钮而不是复选框。你的HTML上没有“form1.ckb”，因此JS代码没有任何内容，HTML中的id也不能有空格，例如

id=“Antipsychotic depot”

multiple

id=“ckb”

是不正确的

也指的是

元素\u id

而不是名称。@Tina-您的代码中还有更多错误。请参阅我上面的评论。我的意思是标签应该指向

元素\u id

而不是名称。@tradyblix我并不打算开始修复所有错误，只是为了演示如何使其工作。还有其他一些事情我会改变，比如：在头部而不是身体上指定“onclick”方法等。我知道我只想指出，

更正的内容是不正确的。OP的原始id
和关系比您发布的内容正确（id中的空格除外）。是的，它可能正在工作，但它没有改善代码。
<html>
<head>
<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 > 4){
            alert("Please Select only four!")
            document.form1.ckb[j].checked = false ;
            return false;
        }
    }
}
</script>

</head>
<body>
<table width="100%" border="0">
    <form action="" id="form1" name="form1">
            <tr>
              <th width="37%" height="19" align="center" bgcolor="#CCCCCC"><strong>Biological</strong></th>
              <th width="37%" align="center" bgcolor="#CCCCCC"><strong> Psychological</strong></th>
              <th width="37%" align="center" bgcolor="#CCCCCC"><strong> Social</strong></th>
            </tr>
            <tr>
              <td><input type="radio" name="Antidepressant" id="ckb" value="Antidepressant" onclick="chkcontrol(0);" />
                <label for="Antidepressant"></label>Antidepressant</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Antipsychotic oral" id="ckb" value="Antipsychotic oral" onclick="chkcontrol(1);" />
                <label for="Antipsychotic oral"></label>Antipsychotic oral</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Antipsychotic_depot" id="ckb" value="Antipsychotic depot" onclick="chkcontrol(2);" />
                <label for="Antipsychotic depot"></label>Antipsychotic depot</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Bblocker" id="ckb" value="B-blocker"  onclick="chkcontrol(3);"/>
                <label for="B-blocker"></label>B-blocker</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Benzodiazepine" id="ckb" value="Benzodiazepine"  onclick="chkcontrol(4);"/>
                <label for="Benzodiazepine"></label>Benzodiazepine</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Mood_stabiliser" id="ckb" value="Mood stabiliser"  onclick="chkcontrol(5);"/>
                <label for="Mood stabiliser"></label>Mood stabiliser</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="ECT" id="ckb" value="ECT"  onclick="chkcontrol(6);"/>
                <label for="ECT"></label>ECT</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="radio" name="Otherbio" id="ckb" value="Other"  onclick="chkcontrol(7);"/>
                <label for="Other"></label>
                Other</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
        </form>
    </table>
</body>
</html>