Mutually exclusive checkboxes

I have a situation where I would like to use two checkboxes for a user to indicate two mutually exclusive events. It is most likely they will check neither, but if they do I want them to be able to uncheck it or check the other one. I understand I could use radio buttons but then I have to give them a third option of neither in case they click one in error or they won’t be able to unset it.

So if they check the first one, I need to find the current status of cbox1 and cbox2 before the click event is processed, and from that point I can do the logic to make sure only the right one is checked. When I don something like

$(‘#actionscbox1, #actionscbox2’).click(function(e)
{
e.preventDefault();
alert($(‘#evenmain input#actionscbox1’).attr(‘checked’));
alert($(‘#evenmain input#actionscbox2’).attr(‘checked’));
});

the alerts show the current click already processed and then it unchecks both. So it appears it is processing the event at the time of the alert but then since I have preventDefault(), it does not send it out to the page.

So how do I find out the state of the check boxes just prior to the click.

Two sets of controls then seem to be the best expected user interface.


[x] Attending?
    To which event?
    (o) This event
    ( ) That other event

Ya, I just tried it and this works as well. I think I was overthinking it initially. Not the first time. :slight_smile:

$(‘#actionscbox1’).click(function()
{
$(‘#evenmain input#actionscbox2’).attr(‘checked’, false);
});
$(‘#actionscbox2’).click(function()
{
$(‘#evenmain input#actionscbox1’).attr(‘checked’, false);
});

I ended up with this and it seems to work fine. I think you could also just uncheck the other one whenever one is clicked. Because it doesn’t matter whether you are checking it or unchecking it, if you click #1, there is no way #2 should be checked.

So I think my solution is unnecessarily complex but it helps in the learning process. :slight_smile:

Thanks for the input.

function actionscbox(boxno, cbval)
{
if (boxno == 1 && cbval == true)
{
$(‘#evenmain input#actionscbox2’).attr(‘checked’, false);
}
else if (boxno == 2 && cbval == true)
{
$(‘#evenmain input#actionscbox1’).attr(‘checked’, false);
}
}

$(‘#actionscbox1’).click(function()
{
var cbval = $(this).attr(‘checked’);
var boxno = 1;
actionscbox(boxno, cbval);
});
$(‘#actionscbox2’).click(function()
{
var cbval = $(this).attr(‘checked’);
var boxno = 2;
actionscbox(boxno, cbval);
});

Agreed, thanks for the input

Looking back at my previous post, I was a bit too harsh. Wrote it at the end of a bad day being yelled at by the boss for nearly the whole day. My apologies for being too harsh, especially to bostboy.

That said, I am firm in my opinion that javascript shouldn’t be used to subvert common form behavior patterns without cause. I could have been a lot more polite in making that point, but the point is still valid and dear to me.

No worries. I don’t get enough of being yelled at and told I’m being an idiot now that I’m no longer married. :slight_smile:

That’s a good approach.

Not could… should.

When a user encounters checkboxes if they have the computer literacy of a 6 year old they will expect to be able to choose one or more.

Radio buttons mean one and only one and, further, radio buttons are supposed to start with one of the options selected to indicate the default. They are not supposed to start off all unchecked.

Don’t be a special snowflake. Whenever I encounter forms with behavior like your describing it screams designer incompetence loud and clear to me. Good User Interface design is following user expectations, not defying them. Good design means following the law of least surprise - that whatever the computer does surprises the user the least, if at all. No one is going to be wowed at your ability to make checkboxes into radio buttons - but some might be annoyed.

Imagine trying to use your computer if every damn program implemented the user controls in a slightly different manner. That would make for a pretty miserable experience would it not? So don’t design a webpage like that either. Be a professional and follow the rules.

You can use the checked selector to find out whether check boxes are checked.

But, what I’d do in the situation is to uncheck both checkboxes, and then check only the selected one.