I have 2 radio button with 2 group.

The structure is like this

1. Main Radio 1
2. Main Radio 2

Under Main Radio 2, there's two more sub radio button.

1. Main Radio 1
2. Main Radio 2
   • Sub Radio 1
   • Sub Radio 2

What am I doing is, in default stage, it will only show Main Radio 1 and Main Radio 2 button. When choose Main Radio 2, two sub radio button of Main Radio 2 appear.

When choose back to Main Radio 1, it will hide the list of Main Radio 2.

The one that I want to achieve is,

When click Main Radio 1, the selection that I made for Sub Radio 1 or Sub Radio 2, want to be uncheck / reset too.

I tried with this javascript, but no success.

document.getElementById("subradiobuttons").reset(); 

Please kindly help me the solutions. Thank you.

With Regards,

I have 2 radio button with 2 group.

The structure is like this

1. Main Radio 1
2. Main Radio 2

Under Main Radio 2, there's two more sub radio button.

1. Main Radio 1
2. Main Radio 2
   • Sub Radio 1
   • Sub Radio 2

What am I doing is, in default stage, it will only show Main Radio 1 and Main Radio 2 button. When choose Main Radio 2, two sub radio button of Main Radio 2 appear.

When choose back to Main Radio 1, it will hide the list of Main Radio 2.

The one that I want to achieve is,

When click Main Radio 1, the selection that I made for Sub Radio 1 or Sub Radio 2, want to be uncheck / reset too.

I tried with this javascript, but no success.

document.getElementById("subradiobuttons").reset(); 

Please kindly help me the solutions. Thank you.

With Regards,

• javascript
• html
• forms

6 Answers 6

I think the best approach for a simple task like this does not needs a full JavaScript library like jQuery.

document.getElementById("main2").addEventListener("click", function()
{
    document.getElementById("subCheckButtons").style.opacity = 1;
}, false);
document.getElementById("main1").addEventListener("click", function()
{
    document.getElementById("subCheckButtons").style.opacity = 0;
    document.getElementById("sub1").checked = false;
    document.getElementById("sub2").checked = false;
}, false);

<input type="radio" id="main1" name="main" />
<input type="radio" id="main2" name="main" />
<div id="subCheckButtons" style="opacity:0;">
    <input type="radio" id="sub1" name="sub" class="subCheck" />
    <input type="radio" id="sub2" name="sub" class="subCheck" />
</div>

Or see the fiddle.

Here is another approach that will reset all inputs to their default position if someone clicks on "Main Radio 1."

//Clear all inputs.
function clearInputs(form) {
    "use strict";

    //Gather all inputs within selected form.
    const inputs = form.querySelectorAll("input");

    //Clear the inputs.
    inputs.forEach(function (input) {
        if (input.hasAttribute("checked") === true) {
            input.checked = true;
        } else {
            input.checked = false;
        }
    });
}

//Monitor "Main Radio 1" for clicks.
function monitorMainRadio1() {
    "use strict";

    const form = document.getElementById("form");
    const mainRadio1 = document.getElementById("main-radio1");

    mainRadio1.addEventListener("click", function () {
        clearInputs(form);
    });
}

//Invoke the monitorMainRadio1 function.
monitorMainRadio1();

Not tested this but...

<input type="radio" onclick="document.getElementById("subradiobuttons").Checked = false;" />

Or you could call a Javascript function to do a bit more work/logic

This page has what you need

It is much, much quicker to do this with jQuery than JavaScript. I remend you do something like this;

Give the radio boxes something like this

<input type="radio" name="main1">
<input type="radio" name="main2">
    <input type="radio" name="sub">
    <input type="radio" name="sub">​

Then with jQuery you can do this

$('input[name=main1]').on('click', function() {
    $('input[name=sub]').attr('checked', false);
});

I've assumed here that you've figured out a way to hide the sub radio buttons. ​

See a fiddle of this here

Also, make sure that you include jQuery at the top of the <script></script> tags containing this code.

script src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"

This code will work similar like checkbox

$("input[type='radio'].xyz").click(function(){
        if (this.previous) {
            this.checked = false;
        }
        this.previous = this.checked;
    });

Reset the radiobutton or RadiobuttonList in the form:

private void ResetFormControlValues(Control parent)
{
    foreach (Control c in parent.Controls)
    {
        if (c.Controls.Count > 0)
        {
            ResetFormControlValues(c);
        }
        else
        {
            switch ((c.GetType().ToString()))
            {
                case "System.Web.UI.WebControls.TextBox":
                    ((TextBox)c).Text = "";
                    break;
                case "System.Web.UI.WebControls.CheckBox":
                    ((CheckBox)c).Checked = false;
                    break;
                case "System.Web.UI.WebControls.RadioButton":
                    ((RadioButton)c).Checked = false;
                    break;
                case "System.Web.UI.WebControls.DropDownList":
                    ((DropDownList)c).SelectedIndex = 0;
                    break;
            }
        }
    }
}