How to set up groups of checkboxes which affect each other

Question

Sorry for the ambiguous title, but it's quite hard to condense what I'm trying to do into a few words. Here's exactly what I'm trying to do:

I want to have a series of groups of checkboxes. One would be gender, with checkboxes for Male and Female, one would be Region, with checkboxes for North, East, South and West and so on.

The aim is to allow the user to select say, Male or Female, but as soon as they put a check in a checkbox of another group e.g. any of the Region checkboxes, all of their previous 'checks' from all other groups are removed.

The point is to only allow the user to select from one group of checkboxes at a time.

I can only think of checking which checkboxes have been marked on click using javascript, but was wondering if there was a simpler way which I may be missing.

I've also thought that maybe a hidden radio button for each group could work.

If anyone has a more elegant solution I'm eager to hear it.

I'd always go down the Javascript route for this - even using radio buttons, you'd still need to set them in JS before submission, so yeah - a bit of custom logic on checkbox click events is all you need! — chrisfrancis27

fearofawhackplanet fearofawhackplanet · Accepted Answer · 2011-05-19T12:39:37

Its been a long time since I've done any pure Javascript, libraries like jQuery make this kind of thing so easy. Anyway, something a bit like the following might work, you'd need to test it in a few browsers and tweak to what you need.

<form name="theForm"> 
    <input type="checkbox" id="male" name="theGroup" onClick="clearGroup(this);">male
    <input type="checkbox" id="female" name="theGroup" onClick="clearGroup(this);">female
    <br />
    <input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
    <input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
    <input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
    <input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>

<script>
    function clearGroup(elem) {
        var group = document.theForm.theGroup;
        for (var i=0; i<group.length; i++) {
            if (group[i] != elem) {
                group[i].checked = false;
            }
        }
    }
</script>

Here is a working example to play around with.

You could do the equivalent thing in jQuery as simply as

$('input:checkbox').click(function() {
    $(this).siblings(':checked').attr('checked', false);   
});

and you have no browser compatibility issues to worry about.

How to set up groups of checkboxes which affect each other

2 Answers