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){
    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. Advertisements

  2. cerr

    Elegie Guest

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

    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"

    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.

    You probably mean the "getElementsByName" method, which returns a
    collection of all elements bearing the same name?
    Since "group" is a variable, and that you want to use the value of this
    variable, you need to use the square bracket accessor:


    and likewise:



    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.

    Elegie, Nov 6, 2011
    1. Advertisements

  3. 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


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

    Swifty Guest

    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.
    Swifty, Nov 6, 2011
  5. cerr

    Evertjan. Guest

    cerr wrote on 05 nov 2011 in comp.lang.javascript:
    Where else?
    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.

    <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>

    <button onclick = "document.getElementById('aNone').checked = true;">
    Evertjan., Nov 6, 2011
  6. cerr

    Evertjan. Guest

    Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:
    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
    Evertjan., Nov 6, 2011
  7. cerr

    Evertjan. Guest

    Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:
    Then again, if you have no other radio-inputs with a value of 'none':

    <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>

    <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>

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

    <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;
    Evertjan., Nov 6, 2011
  8. In comp.lang.javascript message <3c81f60b-9264-4083-ba1f-1c87d4636197@q3
    5g2000prh.googlegroups.com>, Sat, 5 Nov 2011 15:57:04, cerr
    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".
    Dr J R Stockton, Nov 6, 2011
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.