javascript enable disabled checkbox on click and select only one at a time

Question

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>

I agree with @gereeter. Maybe add a "None" option to deselect the other ones. — Ayman Safadi
– Ayman Safadi, Commented Dec 15, 2011 at 2:53
Also, form controls must have a name attribute, otherwise they can't be successful and won't be included when the form is submitted. — RobG
– RobG, Commented Dec 15, 2011 at 3:00

mreyeros · Accepted Answer · 2011-12-15 03:02:13Z

5

Without using a library, I guess you could do the following and it seems to work if I understood you correctly.

Fiddle

answered Dec 15, 2011 at 3:02

mreyeros

4,38923 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gereeter · Accepted Answer · 2011-12-16 02:20:38Z

2

The code you are missing is the code that will deselect the rest. To do this, you should first get a list of all the check boxes, and deselect all of them. Then, select the one the user clicked on.

function toggle(chkBox) {
    checkboxes = document.getElementById("myForm").childNodes;
    var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand.
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;  //clear all of them
    }
    if (isChecked) {
        chkBox.checked = true; //if the original one wasn't checked, check it
    }
}

An alternative to doing this is to use radio buttons, which automatically have the first two properties you want, but not the third, although you could fix this like RobG said, with another option saying "None of the above."

edited Dec 16, 2011 at 2:20

answered Dec 15, 2011 at 2:57

gereeter

4,7891 gold badge30 silver badges28 bronze badges

1 Comment

RobG Over a year ago

Except that if the checkbox was checked and the click unchecked it, then isChecked will be false and your code will re-check it (i.e. it will be impossible to uncheck the checkbox). The last line should just be 'chkBox.checked = isChecked;`. Incidentally, if isChecked is false, there should be no need to do anything.

RobG · Accepted Answer · 2011-12-15 02:55:10Z

1

Have you considered using radio buttons with a default checked button that is effectively the "no choice" option? No javascript required.

<input type="radio" name="rb" value="zero">Zero
<br>
<input type="radio" name="rb" value="one">One
<br>
<input type="radio" name="rb" value="two">Two
<br>
<input type="radio" name="rb" value="None" checked>None of the above

answered Dec 15, 2011 at 2:55

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

javascript enable disabled checkbox on click and select only one at a time

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related