uncheck radio group

Discussion in 'Javascript' started by cerr, Nov 5, 2011.

  1. cerr

    cerr Guest

    Hi There,

    I have a bunch of radio groups on a page and would like to uncheck
    them all together on button click.
    OnClick I trigger this function:

    function uncheck(grpnr){
    group="grp"+grpnr;
    alert("hello!"+"\r\n"+group+"\r\n");
    if (document.getElementByName(group)){
    alert("Got it!");
    }
    for (var i=0; i<document.toppings.group.length; i++) {
    document.toppings.group.checked = false;
    }
    }

    The radio groups is called "grp4" (with the number incrementing). So i
    pass the index number to this function, assemble the group name but
    for some reason this doesn't seem to work, any clues what i need to do
    differently? I also never get the "Got it!" message...my form tag
    looks like this:

    <form name="toppings" action="/store/index.php" method="POST">

    Thank you for the help!
    cerr, Nov 5, 2011
    #1
    1. Advertising

  2. cerr

    Elegie Guest

    On 05/11/2011 23:57, cerr wrote :

    Hello,

    > I have a bunch of radio groups on a page and would like to uncheck
    > them all together on button click.


    You can then try and use the following function:

    function uncheckAll(form) {
    var elements = form.elements;
    for(var ii=0; ii<elements.length; ii++) {
    if (elements[ii].type == "radio") {
    elements[ii].checked = false;
    }
    }
    }

    .... calling it while passing the form object, e.g. (for an INPUT element
    located in the same FORM as the radio controls):

    <input type="button" value="Reset All"
    onclick="uncheckAll(this.form);">

    Note that it is a good practice to always provide a default radio button
    per radio button group, so that the user may select this default value
    if he/she wants to manually reset the group. In such case, you would
    want to uncheck all radio buttons, except for default ones which would
    have to be checked back.

    > OnClick I trigger this function:
    >
    > function uncheck(grpnr){
    > group="grp"+grpnr;
    > alert("hello!"+"\r\n"+group+"\r\n");
    > if (document.getElementByName(group)){


    ------------------------^^-----

    You probably mean the "getElementsByName" method, which returns a
    collection of all elements bearing the same name?

    > alert("Got it!");
    > }
    > for (var i=0; i<document.toppings.group.length; i++) {


    Since "group" is a variable, and that you want to use the value of this
    variable, you need to use the square bracket accessor:

    document.toppings.elements[group].length

    > document.toppings.group.checked = false;


    and likewise:

    document.toppings.elements[group]

    <snip>

    Also, most browsers come up with a javascript console, which report
    javascript errors. Try and find yours: it will give you interesting
    information about why and where scripts fail. One should always program
    with feedback.

    Regards,
    Elegie.
    Elegie, Nov 6, 2011
    #2
    1. Advertising

  3. On Sat, 05 Nov 2011 15:57:04 -0700, cerr wrote:

    > Hi There,
    >
    > I have a bunch of radio groups on a page and would like to uncheck them
    > all together on button click.
    > OnClick I trigger this function:
    >
    > function uncheck(grpnr){
    > group="grp"+grpnr;
    > alert("hello!"+"\r\n"+group+"\r\n");
    > if (document.getElementByName(group)){ alert("Got it!");
    > }
    > for (var i=0; i<document.toppings.group.length; i++) {
    > document.toppings.group.checked = false; }
    > }
    >
    > The radio groups is called "grp4" (with the number incrementing). So i
    > pass the index number to this function, assemble the group name but for
    > some reason this doesn't seem to work, any clues what i need to do
    > differently? I also never get the "Got it!" message...my form tag looks
    > like this:
    >
    > <form name="toppings" action="/store/index.php" method="POST">
    >
    > Thank you for the help!


    You need to uncheck the buttons, not the groups.

    This might work:

    function uncheckAllRadioButtonsInDocument()
    {
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) if (inputs.type=="radio") inputs
    .checked=false;
    }

    Rgds

    Denis McMahon
    Denis McMahon, Nov 6, 2011
    #3
  4. cerr

    Swifty Guest

    On Sun, 06 Nov 2011 01:02:25 +0100, Elegie <>
    wrote:

    >Note that it is a good practice to always provide a default radio button
    >per radio button group, so that the user may select this default value
    >if he/she wants to manually reset the group. In such case, you would
    >want to uncheck all radio buttons, except for default ones which would
    >have to be checked back.


    If you don't want such a default button (there are cases) then you can
    create it, but set it to be invisible, using CSS.

    Then, by checking this one, invisible, button, you automatically
    uncheck any other one on the group.

    --
    Steve Swift
    http://www.swiftys.org.uk/swifty.html
    http://www.ringers.org.uk
    Swifty, Nov 6, 2011
    #4
  5. cerr

    Evertjan. Guest

    cerr wrote on 05 nov 2011 in comp.lang.javascript:

    > I have a bunch of radio groups on a page


    Where else?

    > and would like to uncheck them all together on button click.


    This is a wrong idea IMHO.

    A radio-group without any checked is strictly illegal and error-prone.

    Better make a hidden radio-button that can be checked by javascript.
    And no loop is needed.


    <form>
    <input type='radio' name='a' value='none'
    checked style='display:none;' id='aNone'>
    <label><input type='radio' name='a' value='1'> 1</label><br>
    <label><input type='radio' name='a' value='2'> 2</label><br>
    <label><input type='radio' name='a' value='3'> 3</label><br>
    </form>

    <button onclick = "document.getElementById('aNone').checked = true;">
    Uncheck
    </button>

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 6, 2011
    #5
  6. cerr

    Evertjan. Guest

    Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:

    > cerr wrote on 05 nov 2011 in comp.lang.javascript:
    >
    >> I have a bunch of radio groups on a page

    >
    > Where else?
    >
    >> and would like to uncheck them all together on button click.

    >
    > This is a wrong idea IMHO.
    >
    > A radio-group without any checked is strictly illegal and error-prone.
    >
    > Better make a hidden radio-button that can be checked by javascript.
    > And no loop is needed.
    >
    >
    > <form>
    > <input type='radio' name='a' value='none'
    > checked style='display:none;' id='aNone'>
    > <label><input type='radio' name='a' value='1'> 1</label><br>
    > <label><input type='radio' name='a' value='2'> 2</label><br>
    > <label><input type='radio' name='a' value='3'> 3</label><br>
    > </form>
    >
    > <button onclick = "document.getElementById('aNone').checked = true;">
    > Uncheck
    > </button>


    >> I have a bunch of radio groups on a page


    Sorry, I now read "bunch of groups":

    <button onclick = "document.getElementById('aNone').checked =
    document.getElementById('bNone').checked =
    document.getElementById('cNone').checked =
    document.getElementById('dNone').checked = true;">
    Uncheck groups a,b,c,d
    </button>



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 6, 2011
    #6
  7. cerr

    Evertjan. Guest

    Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:

    > Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:
    >
    >> cerr wrote on 05 nov 2011 in comp.lang.javascript:
    >>
    >>> I have a bunch of radio groups on a page

    >>
    >> Where else?
    >>
    >>> and would like to uncheck them all together on button click.

    >>
    >> This is a wrong idea IMHO.
    >>
    >> A radio-group without any checked is strictly illegal and error-prone.
    >>
    >> Better make a hidden radio-button that can be checked by javascript.
    >> And no loop is needed.
    >>
    >>
    >> <form>
    >> <input type='radio' name='a' value='none'
    >> checked style='display:none;' id='aNone'>
    >> <label><input type='radio' name='a' value='1'> 1</label><br>
    >> <label><input type='radio' name='a' value='2'> 2</label><br>
    >> <label><input type='radio' name='a' value='3'> 3</label><br>
    >> </form>
    >>
    >> <button onclick = "document.getElementById('aNone').checked = true;">
    >> Uncheck
    >> </button>

    >
    >>> I have a bunch of radio groups on a page

    >
    > Sorry, I now read "bunch of groups":
    >
    > <button onclick = "document.getElementById('aNone').checked =
    > document.getElementById('bNone').checked =
    > document.getElementById('cNone').checked =
    > document.getElementById('dNone').checked = true;">
    > Uncheck groups a,b,c,d
    > </button>


    Then again, if you have no other radio-inputs with a value of 'none':

    <form>
    <input type='radio' name='a' value='none'
    checked style='display:none;'>
    <label><input type='radio' name='a' value='1'> 1</label><br>
    <label><input type='radio' name='a' value='2'> 2</label><br>
    </form>

    <form>
    <input type='radio' name='b' value='none'
    checked style='display:none;'>
    <label><input type='radio' name='b' value='1'> 1</label><br>
    <label><input type='radio' name='b' value='2'> 2</label><br>
    </form>

    <button onclick = "unCheck()">
    Uncheck all groups
    </button>

    <script type='text/javascript'>
    function unCheck() {
    var allInputs = document.getElementsByTagName('input');
    for (var i in allInputs)
    if (allInputs.type == 'radio' && allInputs.value == 'none')
    allInputs.checked = true;
    };
    </script>



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 6, 2011
    #7
  8. In comp.lang.javascript message <3c81f60b-9264-4083-ba1f-1c87d4636197@q3
    5g2000prh.googlegroups.com>, Sat, 5 Nov 2011 15:57:04, cerr
    <> posted:

    >I have a bunch of radio groups on a page and would like to uncheck
    >them all together on button click.


    Add a radiobutton to each group, and check it with your button, which
    unchecks the others. IIRC, the new button can be styled to not display.
    It could also be marked "none of those".

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms and links;
    Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
    No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
    Dr J R Stockton, Nov 6, 2011
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U2lsZWVzaA==?=
    Replies:
    4
    Views:
    13,659
    =?Utf-8?B?UmVraGE=?=
    Dec 2, 2004
  2. Scott D Johnson
    Replies:
    1
    Views:
    1,045
    Scott D Johnson
    Sep 27, 2006
  3. Replies:
    0
    Views:
    656
  4. Ken Loomis

    Checked radio button doesn't uncheck

    Ken Loomis, Dec 31, 2003, in forum: Javascript
    Replies:
    1
    Views:
    225
    Ken Loomis
    Dec 31, 2003
  5. Replies:
    2
    Views:
    146
Loading...

Share This Page