0

tableチェックボックスを使用して選択を行うオプションをユーザーに提供する以下を作成しました。選択数を4つに制限しましたが、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;
        }
    }
}

スクリーンショットは次のとおりです。

ここに画像の説明を入力してください

4

1 に答える 1

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です。

于 2012-06-24T03:05:05.773 に答える