CODEWITHSUNDEEP
javascripthtmlcheckbox
magneticrob
magneticrob

Reputation: 101

How to set up groups of checkboxes which affect each other

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.

Upvotes: 1

Views: 24856

Answers (3)

Tahir FEYZIOGLU
Tahir FEYZIOGLU

Reputation: 99

if you have different groups you can use this code below.

<script>
    function clearGroup(elem) {
     //alert(elem.name);
        var group = document.getElementsByName(elem.name);
        for (var i=0; i<group.length; i++) {
            if (group[i] != elem) {
                group[i].checked = false;
            }
        }
    }
</script>
<form name="theForm"> 
    <input type="checkbox" id="male" name="theGroup2" onClick="clearGroup(this);">male
    <input type="checkbox" id="female" name="theGroup2" 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>

Upvotes: 0

magneticrob
magneticrob

Reputation: 101

Managed to figure it out with a little help from fearofawhack planet. Seems really simple now.

Heres a link to the JSFiddle http://jsfiddle.net/aeeN4/

Upvotes: 1

fearofawhackplanet
fearofawhackplanet

Reputation: 53378

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.

Upvotes: 3

Related Questions