Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Cycling through checkboxes

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    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:
    Code:
    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>
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Question Operation action question.

    Quote Originally Posted by Old Pedant View Post
    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:
    Code:
    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:
    Code:
            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?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    It's matching the *OBJECTS*.

    I guess I could have done
    Code:
           cb.checked = ( cb === 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
    Code:
    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
    Code:
         var cb = cbs[c];
    Heh. I was going to code it as
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    If a given groupid might contain checkboxes, text fields, and radio buttons (say), then you could easily add one condition:
    Code:
    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 );
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Question

    Quote Originally Posted by Old Pedant View Post
    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?
    Code:
    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.)

    Code:
    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    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/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Question

    Quote Originally Posted by Old Pedant View Post
    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?

    Quote Originally Posted by Old Pedant View Post
    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?

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    You made it seem over-complicated, but of course you were correct.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •