Thursday, September 23, 2004

Toggling check box selection

I had to write this code to ensure that if a certain checkbox was selected it deselected another one and vic-versa. Why not use a radio button group I hear you ask, but if more than one select box can be selected from a group of 5 then this is not possible with radio buttons.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Checkbox checking...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

function toggleA() {
var materialA = document.getElementsByName("cBox_A")[0];
var materialB = document.getElementsByName("cBox_B")[0];
materialA.checked = true;
materialB.checked = false;

}

function toggleB() {
var materialA = document.getElementsByName("cBox_A")[0];
var materialB = document.getElementsByName("cBox_B")[0];
materialA.checked = false;
materialB.checked = true;

}

</script>
</head>
<body>
<form action="next_file.asp" method="post" enctype="multipart/form-data" name="form_name" id="form_name">
<input name="cBox_A" type="checkbox" value="Value A" onClick="toggleA()">Checkbox A<br>
<input name="cBox_B" type="checkbox" value="Value B" onClick="toggleB()">Checkbox B</form>
</body>
</html>

No comments: