I am dynamically generating checkboxes with id like chkBox100 etc and with onClick function.
What I want to do is
- Only select one checkbox at a time.
- If a previous checkbox is checked and another checkbox is check, deslect the previous one.
- If I click on the selected checkbox, it should deslect it.
I want to do it in standard javascript without jquery or any other library.
Please help your help will be appreciated. Here’s my code so far.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function toggle(chkBox)
{
if (chkBox.checked)
{
chkBox.checked = false;
}
else
{
chkBox.checked = true;
}
// only select one at a time.
}
</script>
</head>
<body>
<form id="myForm" name="myForm">
<input type="checkbox" id="chkBox100" onClick="toggle(this);">
<input type="checkbox" id="chkBox121" onClick="toggle(this);">
<input type="checkbox" id="chkBox1180" onClick="toggle(this);">
</form>
</body>
</html>
Without using a library, I guess you could do the following and it seems to work if I understood you correctly.
Fiddle