Question

105

How to reset/uncheck radio button onclick event?

rated 0 times [ 109] [ 4] / answers: 1 / hits: 35394 / 12 Years ago, tue, march 27, 2012, 12:00:00

I have 2 radio button with 2 group.

The structure is like this

Main Radio 1

Main Radio 2

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

Main Radio 1

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,

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyanah

Add To Favorites

Follow

Total Points: 642

Total Questions: 93

Total Answers: 114

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

answered 12 Years ago mira · Accepted Answer

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.