select only one checkbox in a group not working 100%

Question

I'm trying to make it where the user can only select 1 checkbox at a time on a page.

Here's my code so far:

 function onlyOne(checkbox) { var checkboxes = document.getElementsByName('active', 'inactive', 'showall') checkboxes.forEach((item) => { if (item !== checkbox) item.checked = false }) } 

 <strong>Active</strong> <input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)"> <strong>Inactive</strong> <input type="checkbox" name="inactive" value="Yes" onclick="onlyOne(this)"> <strong>Show All</strong> <input type="checkbox" name="showall" value="Yes" onclick="onlyOne(this)"> 

What keeps happening is it will work sometimes and sometimes they can select more than 1 checkbox. What do I need to tweak to get it working all the time.

Answer 1

HTML DOM getElementsByName() Method Gets all elements with the specified name

So In your code It's getting only the first name active ;

as a result the length of the list of checkboxs is 1 this is why your code doesn't work correctly.

If you want to make sure that what i am saying is true change your code to this and your logic will work just fine:

  function onlyOne(checkbox) { var checkboxes = document.getElementsByName('active'); checkboxes.forEach((item) => { if (item !== checkbox) item.checked = false; }) } 

 <strong>Active</strong> <input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)"> <strong>Inactive</strong> <input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)"> <strong>Show All</strong> <input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)"> 

As the others recommended use the radio buttons it's much easier I just wanted to clear this for you.

EDIT :

If you still want to use checkbox use querySelectorAll instead of your getElementsByName

var checkboxes = document.querySelectorAll('[name="active"], [name="inactive"], [name="showall"]');

Answer 2

You can use radio buttons to do this, it needs no JavaScript and is supported by pretty much everything, Internet Explorer included. They can be used like so:

 <div> <strong>Active</strong> <input type="radio" name="select" id="active" checked> <!-- Checked means that it is initially selected --> </div> <div> <strong>Inactive</strong> <input type="radio" name="select" id="inactive"> </div> <div> <strong>Show All</strong> <input type="radio" name="select" id="showall"> </div> 

Notice how because they are all technically the same input, they all have to have the same name, but you can instead use IDs to tell between them if you really need to.

Answer 3

Using radio buttons would be the preferred choice. But if you do want to use checkboxes, you can use the following approach.

 <strong>Active</strong> <input type="checkbox" name="chkbox" value="Yes" onclick="onlyOne(this)"> <strong>Inactive</strong> <input type="checkbox" name="chkbox" value="Yes" onclick="onlyOne(this)"> <strong>Show All</strong> <input type="checkbox" name="chkbox" value="Yes" onclick="onlyOne(this)"> <script> function onlyOne(checkbox) { var checkboxes = document.getElementsByName('chkbox') checkboxes.forEach((item) => { item.checked = false }) checkbox.checked = true } </script> 

Note that the name attribute for all the input fields are the same.

Answer 4

getElementsByName() only takes one argument. The other arguments you're giving are being ignores, so you're only processing the active checkbox.

Give all your checkboxes the same class, and use getElementsByClassName() instead.

 function onlyOne(checkbox) { var checkboxes = Array.from(document.getElementsByClassName('radio')) checkboxes.forEach((item) => { if (item !== checkbox) item.checked = false }) } 

 <strong>Active</strong> <input type="checkbox" name="active" value="Yes" class="radio" onclick="onlyOne(this)"> <strong>Inactive</strong> <input type="checkbox" name="inactive" value="Yes" class="radio" onclick="onlyOne(this)"> <strong>Show All</strong> <input type="checkbox" name="showall" value="Yes" class="radio" onclick="onlyOne(this)"> 

Answer 5

You are using getElementsByName incorrectly as you can only pass one name to it and it is not an Array so you can't forEach it.
You can use querySelectorAll to query by multiple names and use forEach from the Array prototype.

 function onlyOne(checkbox) { var checkboxes = document.querySelectorAll('[name=active],[name=inactive],[name=showall]') Array.prototype.forEach.call(checkboxes, (item,i) => { if (item !== checkbox) item.checked = false }) } 

 <strong>Active</strong> <input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)"> <strong>Inactive</strong> <input type="checkbox" name="inactive" value="Yes" onclick="onlyOne(this)"> <strong>Show All</strong> <input type="checkbox" name="showall" value="Yes" onclick="onlyOne(this)"> 

While using a radio button control might be the way to go, that just really a comment and not an answer.