Uncheck a checkbox if another is checked (3 checkboxes)

**qwikad.com** · 04-24-2014, 01:39 AM

This allows to automatically check / uncheck between 2 checkboxes:

Javascript:

Code:

<script>
function checkRefresh(value)
{
    document.form1.submit();
}  
 
function uncheck(check)
{
    var prim = document.getElementById("allcities");
    var secn = document.getElementById("allfeatured");
    if (prim.checked == true && secn.checked == true)
    {
        if(check == 1)
        {
            secn.checked = false;
            checkRefresh();
        }
        else if(check == 2)
        {
            prim.checked = false;
            checkRefresh();
        }
    }
 
}
</script>

HTML:

HTML Code:

<input type="checkbox" id="allcities" onClick="uncheck(1);">
<input type="checkbox" id="allfeatured" onClick="uncheck(2);">

I want to add a third option:

HTML Code:

<input type="checkbox" id="local" onClick="uncheck(3);">

Can anyone suggest a working solution? Thank you.

**jscheuer1** · 04-24-2014, 03:25 AM

Use radio buttons:

HTML Code:

<input type="radio" id="allcities" name="locales[]">
<input type="radio" id="allfeatured" name="locales[]">
<input type="radio" id="local" name="locales[]">

That's what they're for. If they all have the same name, only one can be checked. It's automatic, no javascript required.

**qwikad.com** · 04-24-2014, 01:49 PM

Originally Posted by jscheuer1

Use radio buttons:

HTML Code:

<input type="radio" id="allcities" name="locales[]">
<input type="radio" id="allfeatured" name="locales[]">
<input type="radio" id="local" name="locales[]">

That's what they're for. If they all have the same name, only one can be checked. It's automatic, no javascript required.

John, the problem is they do not share the same name.

**jscheuer1** · 04-24-2014, 01:52 PM

Can't you make them do that? I mean, if they're mutually exclusive, it's only logical for them to have the same name.

**vwphillips** · 04-24-2014, 02:44 PM

agree with john but

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function uncheck(){
 var a=uncheck.arguments,z0=0;
 for (;z0<a.length;z0++){
  document.getElementById(a[z0])?document.getElementById(a[z0]).checked=false:null;
 }
}
/*]]>*/
</script></head>

<body>
<input type="checkbox" id="allcities" onClick="uncheck('allfeatured','local');">
<input type="checkbox" id="allfeatured" onClick="uncheck('allcities','local');">
<input type="checkbox" id="local" onClick="uncheck('allcities','allcities');">

</body>

</html>

**qwikad.com** · 04-24-2014, 03:24 PM

@vwphillips - very cool.

The last checkbox should be this: <input type="checkbox" id="local" onClick="uncheck('allcities','allfeatured');">

But it's working great. Thanks!

**jscheuer1** · 04-24-2014, 04:43 PM

I've written code like that in the past, and a part of me is glad you have what you want. But I'm not all that interested these days in writing code that does something already available in ordinary HTML. I would encourage you to investigate the use of forms in general and particularly in this case the use of radio buttons. If not now, then at some future time. Once you have a thorough understanding of what forms are for and what radio buttons do, you may want to rethink what you're doing and find that it's much easier to accomplish using what's already available.

**qwikad.com** · 04-24-2014, 05:44 PM

Originally Posted by jscheuer1

I've written code like that in the past, and a part of me is glad you have what you want. But I'm not all that interested these days in writing code that does something already available in ordinary HTML. I would encourage you to investigate the use of forms in general and particularly in this case the use of radio buttons. If not now, then at some future time. Once you have a thorough understanding of what forms are for and what radio buttons do, you may want to rethink what you're doing and find that it's much easier to accomplish using what's already available.

I totally get it John. I am just trying to improve user-friendliness of one of my pages where the users have 3 checkboxes to choose from. Only one checkbox can be checked to proceed. Before they would have to uncheck a checked checkbox if they happened to change their minds and wanted to choose a different checkbox. Where's now they won't have to do that. It's really all about user-friendliness and convenience.

I wish I could accomplish that without javascript, but nothing seemed to be working. Also, I didn't write the original script for that page, so whatever I have in it is what I have to work with.