SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Washington DC
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Uncheck radio button

    HTML Code:
    <input type=radio name=something value=A>
    <input type=radio name=something value=B>
    <input type=radio name=something value=C>
    Can't seem to find anything that does the job, so I figured I'd post here.

    Does anyone know of a way to "uncheck" a radio button, but still toggle between the possible selections? Closest thing I could find required the user to double click to uncheck.

    Thanks,
    Han

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    To uncheck a radio button you simply click on one of the other buttons in the same group. A radio button group must have one of the options selected or it doesn't make sense. If you actually have a situation where you don't want any of them checked then you are either missing a button for the option where all the others need to be unchecked or you are using the wrong type of field.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Washington DC
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I know it doesn't make sense. But the customer wants it done this way.

    I need to leave the option of having nothing selected.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    So you will have to use checkboxes instead and add code to deselect the others when one is selected. You can't change the built-in functionality of radio buttons, once a radio button is selected then one of the buttons is always selected because that is what radio buttons do.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Washington DC
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The customer wants radio buttons. Won't change their minds.

  6. #6
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do as Stephen has told Han, make an additional radio button that will uncheck others. Or use check boxes. Or any event handler that will uncheck the radio buttons using javascript. Customer won't change their minds means you are probably new and going down in front of them.

    Imagine going to a car shop asking for a car that uses water as fuel and you ask the vendor that you won't change your mind. What he will reply ?

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Washington DC
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Customer won't change their minds means you are probably new and going down in front of them.
    haha... Wish it were that easy. But this is the land of government contracting. Requirements are written a year before the deployment of an application. Test cases are mapped to a requirement document. I know it sounds silly, but changing a form field from a radio button to a checkbox requires approval of a dozen people.

  8. #8
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand. In that case you can add an additional radio that can be used to uncheck other buttons ... or think about another way to trigger an event that will eventually uncheck the radio buttons. You need a trigger, whatever it is ...

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <script type="text/javascript">
    rC = function(radioEl) {
    	if(radioEl.checked == true) {
    		radioEl.checked = false;
    		return false;
    	}
    	else {
    		radioEl.checked = true;
    		return true;
    	}
    }
    </script>
    <input type=radio name=something value=A onClick="return false" onMouseDown="rC(this)">
    <input type=radio name=something value=B onClick="return false" onMouseDown="rC(this)">
    <input type=radio name=something value=C onClick="return false" onMouseDown="rC(this)">

    that is wayyyyyyyyyy overkill and a stupid way of doing things, but for government work, at least its a start

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Washington DC
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic! That worked.

    Thank you.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That code will only work in some browsers and only if JavaScript is enabled.

    Simplest solution that is still workable without JavaScript.

    Code:
    <input type=radio name=something value=A >
    <input type=radio name=something value=B >
    <input type=radio name=something value=C >
    <input type="radio name=something value='' style="display:none" >
    and then use JavaScript to check the hidden option when required.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •