By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,071 Members | 1,244 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,071 IT Pros & Developers. It's quick & easy.

Radio button de-check with onclick?

P: n/a
I have a radio button group. When the page loads none of them are
selected. OnClick selects ONE and clicking another one selects a
different one - this is normal behavior.

I want to modify it so that clicking on a radio which is already
selected will deselect it so that none of the group are selected.

I can get the required behavior with a double-click:

ondblclick="this.checked=!(this.checked);"

or even:

ondblclick="this.checked=false;"

How can I get that behavior with an onclick() - to de-check the
currently checked button?
Oct 29 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Harry Haller wrote:
I have a radio button group. When the page loads none of them are
selected. OnClick selects ONE and clicking another one selects a
different one - this is normal behavior.

I want to modify it so that clicking on a radio which is already
selected will deselect it so that none of the group are selected.

I can get the required behavior with a double-click:

ondblclick="this.checked=!(this.checked);"

or even:

ondblclick="this.checked=false;"

How can I get that behavior with an onclick() - to de-check the
currently checked button?
You are asking how to change a radio button to behave like a checkbox.
This isn't a good idea as that is not what people's mental model of
radio button behavior is. Please consider adding one more radio
button with a label of 'None' or something similar. You can even
default it as 'checked'. This allows the user to select a radio button
from the group while still allowing them to indicate that it was a
mistake and choose 'nothing'.

John

Oct 29 '06 #2

P: n/a
On 29 Oct 2006 14:02:01 -0800, "johkar" <no********@msn.comwrote:
>Harry Haller wrote:
>I have a radio button group. When the page loads none of them are
selected. OnClick selects ONE and clicking another one selects a
different one - this is normal behavior.

I want to modify it so that clicking on a radio which is already
selected will deselect it so that none of the group are selected.

I can get the required behavior with a double-click:

ondblclick="this.checked=!(this.checked);"

or even:

ondblclick="this.checked=false;"

How can I get that behavior with an onclick() - to de-check the
currently checked button?

You are asking how to change a radio button to behave like a checkbox.
This isn't a good idea as that is not what people's mental model of
radio button behavior is. Please consider adding one more radio
button with a label of 'None' or something similar. You can even
default it as 'checked'. This allows the user to select a radio button
from the group while still allowing them to indicate that it was a
mistake and choose 'nothing'.

John
My sentiments too. But I code the site - I don't write the spec. My
manager does and he hasn't read books on "Designing the user
interface", etc. ... He is very hands on - doesn't like me taking the
laptop home, wants me to work exclusively from the office. The
previous designer wrote the pages like that - right now WHEN NOTHING
IS SELECTED - the system logically selects everything in that group -
so when no radio is selected - all 6 of them must be selected in the
form.

I agree with you - it should be a checkbox group with either all or
only 1 selected!

But..., out of interest - how do I go about modifying the click
button? - can I override the event or add a supplementary event
handler?

I will tell the boss (again) what I think the page should be doing.
Oct 30 '06 #3

P: n/a

Harry Haller написав:
I have a radio button group. When the page loads none of them are
selected. OnClick selects ONE and clicking another one selects a
different one - this is normal behavior.

I want to modify it so that clicking on a radio which is already
selected will deselect it so that none of the group are selected.

Try this, maybe you will satisfy your manager :)

<html>
<head>
<script type="text/javascript">

function cl(sender)
{
if (sender.alreadyChecked)
sender.checked = false;
}

function md(sender)
{
sender.alreadyChecked = sender.checked;
}

</script>
</head>
<body>
<input type="radio" value="1" name="test" onmousedown="md(this)"
onclick="cl(this)">
<input type="radio" value="2" name="test" onmousedown="md(this)"
onclick="cl(this)">
<input type="radio" value="3" name="test" onmousedown="md(this)"
onclick="cl(this)">
</body>
</html>

Oct 30 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.