I created the follwing table which gives the user option to uses check boxes to ehter the selection. I limited the number of selection to four, but its selecting more than 4 choices.
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> </td>
<td> </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> </td>
<td> </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> </td>
<td> </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> </td>
<td> </td>
</tr>
<tr>
<td>
<input type="radio" name="Benzodiazepine" id="Benzodiazepine" value="Benzodiazepine" onclick="chkcontrol(5)" />
<label for="Benzodiazepine"></label>Benzodiazepine</td>
<td> </td>
<td> </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> </td>
<td> </td>
</tr>
<tr>
<td>
<input type="radio" name="ECT" id="ECT" value="ECT" onclick="chkcontrol(7)" />
<label for="ECT"></label>ECT</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<input type="radio" name="Otherbio" id="Other" value="Other" />
<label for="Other"></label>Other</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
The script used to chec the number of selection:
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;
}
}
}
Here’s a screenshot:
After a few minor corrections:
Still, it doesn’t make sense as the form is not submitting its content anywhere, but it’s a good POC.