Cycling through checkboxes

[interference541]

Hi Guys,

I'm currently working on a page working with separate categories and a whole lotta check boxes. My objective is to have one checkbox deselect the other checkboxes in its category without interfering with the rest. How would I go about doing this assuming the id tag is already in use and differs per tag? I was thinking about cycling through all checkbox tags and sorting them out via class but I'm looking for something possibly more efficient.

[Old Pedant]

Radio buttons?

That's what they are for.

You said "assuming the id tag is already in use and differs per tag". That's fine, so long as the *NAME* is the same, then the radio buttons are automatically grouped.

But if you need checkboxes for some reason--or if you said "id" but meant "name"--then there's an easy way to do it:

function fakeRadio( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        var cb = cbs[c]; 
        cb.checked = ( cb == which );
    }
}
...
<div id="group1">
    <input type="checkbox" name="a11" onclick="fakeRadio('group1',this);" />
    <input type="checkbox" name="bbb" onclick="fakeRadio('group1',this);" />
    <input type="checkbox" name="cde" onclick="fakeRadio('group1',this);" />
</div>
<div id="people">
    <input type="checkbox" name="xxx" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="xx2" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="xx4" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="x111xx" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="ttxxx" onclick="fakeRadio('people',this);" />
</div>
...

[jmrker]

Operation action question.

Radio buttons?

That's what they are for.

You said "assuming the id tag is already in use and differs per tag". That's fine, so long as the *NAME* is the same, then the radio buttons are automatically grouped.

But if you need checkboxes for some reason--or if you said "id" but meant "name"--then there's an easy way to do it:

function fakeRadio( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        var cb = cbs[c]; 
        cb.checked = ( cb == which );
    }
}
...
<div id="group1">
    <input type="checkbox" name="a11" onclick="fakeRadio('group1',this);" />
    <input type="checkbox" name="bbb" onclick="fakeRadio('group1',this);" />
    <input type="checkbox" name="cde" onclick="fakeRadio('group1',this);" />
</div>
<div id="people">
    <input type="checkbox" name="xxx" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="xx2" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="xx4" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="x111xx" onclick="fakeRadio('people',this);" />
    <input type="checkbox" name="ttxxx" onclick="fakeRadio('people',this);" />
</div>
...

Old Pedant:
I have a question about the "fakeRadio" function.
In the line:

        cb.checked = ( cb == which );

How does that line work. In particular the (cb == which) part.
How does it know the "this" passed to the function will match the "cb" when then ".name" is not specified by either reference?

What am I missing here to understand how the checkbox becomes checked while resetting the other buttons?

[Old Pedant]

It's matching the *OBJECTS*.

I guess I could have done

       cb.checked = ( cb [B][COLOR="Red"]===[/COLOR][/B] which );

"which" is a checkbox. Notice that it was passed from fakeRadio('people',this);

"cb" is *also* a checkbox. A single checkbox from the collection of checkboxes that we got via

var cbs = document.getElementById(groupid).getElementsByTagName("input");

(technically, that's a collection of <input> objects, but as coded all the <input>s in each groupid are checkboxes) and then

     var cb = cbs[c];

Heh. I was going to code it as

function fakeRadio( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        cbs[c].checked = ( cbs[c] == which );
    }
}

But I put in the var cb = cbs[c] to make it clear that cb is indeed a single checkbox. A checkbox *object*. One of which, in the collection, has to be the same object as the this I passed in.

[Old Pedant]

If a given groupid might contain checkboxes, text fields, and radio buttons (say), then you could easily add one condition:

function fakeRadio( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        [B][COLOR="Red"]if (cbs[c].type == "checkbox" ) [/COLOR][/B]cbs[c].checked = ( cbs[c] == which );
    }
}

[Old Pedant]

But the code will work, as is, so long as you don't have both checkboxes and radio buttons in the same groupid. You see why?

[jmrker]

But the code will work, as is, so long as you don't have both checkboxes and radio buttons in the same groupid. You see why?

I thought I was, until your previous post with the 'type' conditional test.

In the same group, could I not mix radio and checkboxes with something like this?

function fakeRadio( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        if (cbs[c].type == "checkbox" ) cbs[c].checked = ( cbs[c] == which );
    }
}

function fakeRadioCheck( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        if (cbs[c].type == "radio" ) cbs[c].checked = ( cbs[c] == which );
    }
}

And, I don't think type='text' has a 'checked' parameter.
Are you saying I can add it to the element and check it by doing something like this?
(Note: I'm not sure if the example is very valuable in the real world.)

function fakeText( groupid, which )
{
    var cbs = document.getElementById(groupid).getElementsByTagName("input");
    for ( var c = 0; c < cbs.length; ++c )
    {
        if (cbs[c].type == "text" ) cbs[c].checked = ( cbs[c] == which );
    }
}

...

    <input type="text" name="t1" checked=false onclick="fakeText('group1',this);" />
    <input type="text" name="t2" checked=false onclick="fakeText('group1',this);" />
    <input type="text" name="t3" checked=false onclick="fakeText('group1',this);" />

BTW, thanks for the explanations and extra time spent on this topic.
I don't know if the OP appreciates the special cases, but I do.

[Old Pedant]

Naw, it's sneakier than that.

If you have <input type=text> in the same group, then by definition *all* the <input type=text> will receive an additional property of checked=false. Which is meaningless for text fields, but does no harm.

Go ahead, whack me upside the head. <grin/>

[jmrker]

Naw, it's sneakier than that.

If you have <input type=text> in the same group, then by definition *all* the <input type=text> will receive an additional property of checked=false. Which is meaningless for text fields, but does no harm.

Go ahead, whack me upside the head. <grin/>

Well, butter my bottom and call me a turkey!
How did you ever find that bit of trivia?

But the code will work, as is, so long as you don't have both checkboxes and radio buttons in the same groupid. You see why?

Was I correct with my guess or was there a different reason?

[Old Pedant]

You made it seem over-complicated, but of course you were correct.