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

时间：2012-06-24 02:52:13

标签： javascript validation html-form

我创建了以下table，它为用户提供了使用复选框来选择的选项。我将选择的数量限制为四个，但它选择了4个以上的选择。

HTML：

<table width="100%" border="0">
    <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="Antidepressant" value="Antidepressant" onclick="chkcontrol(1)" />
            <label for="Antidepressant"></label>Antidepressant</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="Antipsychotic oral" id="Antipsychotic oral" value="Antipsychotic oral" onclick="chkcontrol(2)" />
            <label for="Antipsychotic oral"></label>Antipsychotic oral</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="Antipsychotic_depot" id="Antipsychotic depot" value="Antipsychotic depot" onclick="chkcontrol(3)" />
            <label for="Antipsychotic depot"></label>Antipsychotic depot</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="Bblocker" id="B-blocker" value="B-blocker" onclick="chkcontrol(4)" />
            <label for="B-blocker"></label>B-blocker</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="Benzodiazepine" id="Benzodiazepine" value="Benzodiazepine" onclick="chkcontrol(5)" />
            <label for="Benzodiazepine"></label>Benzodiazepine</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="Mood_stabiliser" id="Mood stabiliser" value="Mood stabiliser" onclick="chkcontrol(6)" />
            <label for="Mood stabiliser"></label>Mood stabiliser</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="ECT" id="ECT" value="ECT" onclick="chkcontrol(7)" />
            <label for="ECT"></label>ECT</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="Otherbio" id="Other" value="Other" />
            <label for="Other"></label>Other</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

用于检查选择次数的脚本：

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

以下是截图：

enter image description here

1 个答案:

答案 0 :(得分：1)

经过一些小修改后：

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

但是，由于表单没有在任何地方提交内容，所以没有意义，但它是一个很好的POC。

相关问题
最新问题