Entry
How can I create a group of checkboxes behaving like a radio group?
How can I create a group of checkboxes behaving like a radio group?
How can I create group of checkboxes where one or no checkbox is checked?
Mar 15th, 2000 16:14
Martin Honnen,
You loop through the checkbox group array to uncheck checked boxes and
for the radio behaviour you cancel the click action as needed. The
following contains two functions providing the behaviour together with
two example forms with three connected checkboxes each.
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
function oneOrNoCheckboxGroup (checkbox) {
var checkboxGroup = checkbox.form[checkbox.name];
for (var c = 0; c < checkboxGroup.length; c++)
if (checkboxGroup[c] != checkbox)
checkboxGroup[c].checked = false;
}
function radioCheckboxGroup (checkbox) {
var checkboxGroup = checkbox.form[checkbox.name];
for (var c = 0; c < checkboxGroup.length; c++)
if (checkboxGroup[c] != checkbox)
checkboxGroup[c].checked = false;
return checkbox.checked;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Kibo"
ONCLICK="oneOrNoCheckboxGroup(this);"
>
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Xibo"
ONCLICK="oneOrNoCheckboxGroup(this);"
>
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Maho"
ONCLICK="oneOrNoCheckboxGroup(this);"
>
</FORM>
<FORM NAME="formName">
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Kibo"
ONCLICK="return radioCheckboxGroup(this);"
>
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Xibo"
ONCLICK="return radioCheckboxGroup(this);"
>
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Maho"
ONCLICK="return radioCheckboxGroup(this);"
>
</FORM>
</BODY>
</HTML>
