Uncheck a checkbox if another is checked (3 checkboxes)

This allows to automatically check / uncheck between 2 checkboxes:

Javascript:

<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>

Code (markup):

HTML:

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

Code (markup):

I want to add a third option:

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

Code (markup):

Can anyone suggest a working solution? Thank you.

 

Uhm... this strikes me as "scripting for nothing" -- why not just use input[radio] since they do this by default?

<input type="radio" name="chooseArea" id="allcities" value="all"/>
<input type="radio" name="chooseArea" id="allfeatured" value="featured" />
<input type="radio" name="chooseArea" id="local" value="local" />

Code (markup):

No scripttardery needed... well, unless when one is chosen there's other stuff you are doing, and for that you should be attaching 'onchange' from the scripting.

After all, the unwritten rule of scripting -- if you can't make the page work without JavaScript first, you likely have no business adding scripting to it.

 

I would suggest using radio buttons instead of checkboxes as they already have the feature of only allowing one button to be selected in a group. However if you want to still use checkboxes, then you can do something similar to what was asked in this question:

http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group

<input type="checkbox" class="radio" value="1" id="allcities" name="group[1][]">
<input type="checkbox" class="radio" value="1" id="allfeatured" name="group[1][]">
<input type="checkbox" class="radio" value="1" id="local" name="group[1][]">

Code (markup):

$("input:checkbox").click(function() {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

Code (markup):

 

Because if scripting for nothing isn't bad enough, jQuery-tardery will make it all better -- RIGHT...

 

Thank you everyone for your input!!

I think I got it. Actually someone else got it for me. Seems to be working.

Maybe someone else will find this useful:

Javascript:

<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>

Code (markup):

HTML:

<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','allfeatured');">

Code (markup):

 

Several people have told you to use radio buttons instead of checkboxes. Why don't you just use the proper HTML elements? And besides, that's one of the ugliest solutions I've seen in a long time.

 

Not so fast. The problem is I couldn't use radio buttons because they were not sharing the same name property. I thought I mentioned it here. I guess I did not. Why do you think I'd go jumping through all the hoops if I, indeed, could just use radio buttons?

Ugly or not the script does what it promises. By the way, don't try to be a deathshadow junior. I can take his brunt of criticism, but I, somehow, don't care about yours.

 

Pretty much, if you have ugly client side code that needs fixing, you probably have ugly server-side code handling it.

Swapping a check if something exists vs. value of a single element shouldn't be too hard -- hell, checking the value of one element vs. the existence of three different ones should be easier.

Ugly bloated client-side scripting garbage with NO graceful degradation is NOT the answer. The proper semantic markup and making the server-side handle it is.

Particularly since with you having a new value being added (hence your need for a third one) means you should be in there already making changes.

 

Uhm. What do you mean, "not sharing the same name-property" - that's exactly what radio-buttons HAVE. Did you mean that they DO share the same name? And that that's the problem? I'm confused.
And of course you can use radio buttons - I do understand that sometimes you don't have full control, but when you DO, there's no reason adding unnecessary code to do something the element's aren't supposed to do.

The script and the way it's implemented IS ugly. You have "onclick"-events in your HTML, for one (completely unnecessary, and bad practice), and you're using CDATA in the script...
As for the comment about not being @deathshadow junior, I think you're a bit funny. First of all, I and @deathshadow are probably some of the people on here who's butted heads the most, at least recently - however, he does know what he's talking about, and sometimes he's even helpful What you chose to do with what I say is completely up to you, but I'm not here to make friends - I'm here to tell people the truth (or, at least, my version of it), and if you don't like it, feel free to block me. But I will keep telling you you're blatantly wrong when you are, regardless.