How do I deselect a radio button group with javascript ?

[mark4asp]

I have a group of radio buttons:

<input type="radio" name="radioList" id="rad1" value="1" />1<br />
<input type="radio" name="radioList" id="rad2" value="2" />2<br />
<input type="radio" name="radioList" id="rad3" value="3" />3<br />

After one of them had been selected (with a mouse click) there seems no
way to clear the selection with javascript. i.e. To deselect.

For instance after I do this:

function clearAllRadios() {
var radList = document.getElementsByName('radioList');
for (var i = 0; i < radList.length; i++) {
if(radList.checked) radList.checked = false;
}
}

the display continues to show the previous element as selected - even
though its checked property has now been set to false.

Likewise.

document.forms[0].reset() has no effect upon the display.

At this point I added a fourth item:

<span style="display:none"><input type="radio" name="radioList"
id="rad4" value="4" /><span>

but I can't clear the display by setting its checked property to true:
document.getElementById('rad4').checked = true;

The same behavior is seen in Safari, IE6 and FF.
This is an asp.net page but the radios here are pure html. Setting the
page's ViewState to false didn't cure the problem.

Is this a general problem with radio lists in html forms?, is it
specific to asp.net?, or is it some private bug of mine ?


PS 1:

By adding an onclick event [onclick="ClearRad(this)"] to each button I
can, at least, deselect the currently selected display item:

var checkedRadio;
function ClearRd(oRad)
{
if (checkedRadio == oRad)
{
oRad.checked = false;
checkedRadio = null;
} else {
checkedRadio = oRad;
}
}

But that's not what I want.

PS 2:

Someone told me to use setAttribute(), but I tried it and it didn't
work. But isn't that IE6 only anyway?

 

[mark4asp]

But that's not what I want.

What I want is to loop through the group of radio buttons, find the
selected one and deselect it, so that no button in the group is shown
to be selected.

Can I do that?

 

[mark4asp]

Yes, include an extra, hidden radio button and make that selected in
your JavaScript. Even though hidden, it may get returned to whatever
handles the form, so give it a value which you can recognise as
"ignore this"

This is quite a complex page. I've just discovered that the original
code does in fact work when the page is simplifed. So the problem is
likely to be that the html is broke somewhere and that's having a
knock-on effect? I can't understand it anyother way so I'll look for
the broken code.

I've just taken the actual radio buttons with the javascript and put it
all into a sample page. The sample page works fine. I suppose my
complex page with the original code must be broke somewhere.

Thanks for the reply, sorry for wasting your time.

 

[SAM]

Le 12/9/08 6:34 PM, mark4asp a écrit :

I have a group of radio buttons:

<input type="radio" name="radioList" id="rad1" value="1" />1<br />
<input type="radio" name="radioList" id="rad2" value="2" />2<br />
<input type="radio" name="radioList" id="rad3" value="3" />3<br />

After one of them had been selected (with a mouse click) there seems no
way to clear the selection with javascript. i.e. To deselect.

For instance after I do this:

function clearAllRadios() {
var radList = document.getElementsByName('radioList');
for (var i = 0; i < radList.length; i++) {
if(radList.checked) radList.checked = false;
}
}

the display continues to show the previous element as selected - even
though its checked property has now been set to false.

Not at all !
That works fine for me in my Firefox.
( not need if(radio.checked) )

Likewise.

document.forms[0].reset() has no effect upon the display.

that too runs fine.

Is this a general problem with radio lists in html forms?, is it
specific to asp.net?, or is it some private bug of mine ?

certainly a bug of you (did you enabled the JavaScript ?) ;-)

PS 1:

By adding an onclick event [onclick="ClearRad(this)"] to each button I
can, at least, deselect the currently selected display item:

No, or with difficulties ... didn't you just click it (to validate it) ?
Try with onmouseup

Your bug is probably here ?
(I do not understand why you want check/uncheck a radio-button by JS
when that works automatically without doing nothing)

PS 2:

Someone told me to use setAttribute(), but I tried it and it didn't
work. But isn't that IE6 only anyway?

Bilevesées !
Since last century DOM0 can do that ! :-(

Why to use heavy artillery of the DOM2 not understood by IE ?
(and probably other browsers when you act on form's elements)



function radiosOff(what) {
var r = what.form.elements['rad'];
setTimeout(function() {
for(var i=0, n=r.length; n>i; i++) r.checked = false; },50);
}


<p>
<input type="radio" value="1" name="rad" checked="checked" />1
<input type="radio" value="2" name="rad" onmclick="radiosOff(this)" />2
<input type="radio" value="3" name="rad" />3
</p>

 

[David Mark]

Yes, include an extra, hidden radio button and make that selected in
your JavaScript. Even though hidden, it may get returned to whatever
handles the form, so give it a value which you can recognise as "ignore
this"

That is not a solution.

[snip]

 

[David Mark]

I have a group of radio buttons:

  <input type="radio" name="radioList" id="rad1" value="1" />1<br />
  <input type="radio" name="radioList" id="rad2" value="2" />2<br />
  <input type="radio" name="radioList" id="rad3" value="3" />3<br />

XHTML is it?

After one of them had been selected (with a mouse click) there seems no
way to clear the selection with javascript. i.e. To deselect.

Sure there is.

For instance after I do this:

  function clearAllRadios() {
    var radList = document.getElementsByName('radioList');
    for (var i = 0; i < radList.length; i++) {
      if(radList.checked) radList.checked = false;
    }
  }

the display continues to show the previous element as selected - even
though its checked property has now been set to false.

Where is the markup?

Likewise.  

document.forms[0].reset()  has no effect upon the display.

Maybe that is the wrong form.

At this point I added a fourth item:

<span style="display:none"><input type="radio" name="radioList"
id="rad4" value="4" /><span>
Why?


but I can't clear the display by setting its checked property to true:
document.getElementById('rad4').checked = true;

I don't know what that means.

The same behavior is seen in Safari, IE6 and FF.
Okay.

This is an asp.net page but the radios here are pure html. Setting the

Aha. XHTML served as invalid HTML. The server sends markup that the
client must error correct, despite the fact that Microsoft's browser
has never supported XHTML. Who comes up with these things?

page's ViewState to false didn't cure the problem.

ASP.NET voodoo is OT. And if you are stabbing around in the dark
within the confines of the framework, you have little chance of
creating a viable app.

Is this a general problem with radio lists in html forms?, is it
specific to asp.net?, or is it some private bug of mine ?

Who knows?

[snip]

 

[RobG]

I have a group of radio buttons:

<input type="radio" name="radioList" id="rad1" value="1" />1<br />
<input type="radio" name="radioList" id="rad2" value="2" />2<br />
<input type="radio" name="radioList" id="rad3" value="3" />3<br />

After one of them had been selected (with a mouse click) there seems no
way to clear the selection with javascript.

This is an old issue that is covered in the HTML specification:

'If no radio button in a set sharing the same control name is
initially "on", user agent behavior for choosing which control is
initially "on" is undefined...authors should ensure that in each set
of radio buttons that one is initially "on".'

<URL: http://www.w3.org/TR/html401/interact/forms.html#radio >


In other words, always provide a suitable default (e.g. a "none"
option) that is set to checked in the HTML.

i.e. To deselect.

For instance after I do this:

function clearAllRadios() {
var radList = document.getElementsByName('radioList');
for (var i = 0; i < radList.length; i++) {
if(radList.checked) radList.checked = false;

There doesn't seem much point in testing the checked property, just
set them all to false.

}
}

the display continues to show the previous element as selected - even
though its checked property has now been set to false.

In which browser? It works for me, see below.

Likewise.

document.forms[0].reset() has no effect upon the display.

Don't agree with that either, try:

<form action="">
<div>
<input type="radio" name="foo">one<br>
<input type="radio" name="foo">two<br>
<input type="radio" name="foo">three<br>
<input type="button" value="Clear checked" onclick="
var els = this.form.foo;
var i = els.length;
while (i--) els.checked = false;
">
<input type="button" value="Call Reset" onclick="
this.form.reset();
">
</div>
</form>



Tested in IE6 and Firefox 3.

 

[David Mark]

That's funny. It works everywhere where I've used the technique. You
obviously don't consider getting what you want as acceptable. In this
case, I won't waste my time wishing you a Merry Christmas.

Getting what you want can be accomplished in more than one way. Some
are right, some are wrong. Yours is wrong.

[snip]

 

[RobG]

That's funny. It works everywhere where I've used the technique. You
obviously don't consider getting what you want as acceptable.

You obviously haven't tested it with javascript disabled - there is no
need to use javascript to solve the OP's problem.