44

How do I default the value of a non-selected radio button to 0?

I have the following HTML:

<input type="radio" name="myradiobutton" value="1" />1
<input type="radio" name="myradiobutton" value="2" />2
<input type="radio" name="myradiobutton" value="3" />3

And I have the following code to get the value of the selected radio button

var radio_button_value $('input[name=myradiobutton]:radio').click(function() {var value = $(this).val();});

Problem is, I want to default the value of radio_button_value to 0 in the event nothing is selected. How do I do that?

I basically want to do the pseduo-code below (but this doesn't work)

var radio_button_value $('input[name=myradiobutton]:radio').click(function() { 
if set
  return $(this).val();
else
  return 0;
});

UPDATE

There appears to be confusion on what I'm asking for.

What I want to do when the page loads (before a user has had a chance to even select a radio button), I want a function that will return 0 for the radio button value.

Then, once a user selected a radio button, that SAME function will return the selected value of the radio button.

Make sense?

3
  • 1
    I don't understand this. Surely if you've clicked on a radio button, one of them must be selected? What context do you need this in? Nov 9, 2010 at 21:42
  • I want to set the default value to 0 so that when the page loads, before the user had a chance to select a radio button, my function will return 0. Then once a user selects a radio button, it will return the value of the selected attribute. Make sense?
    – StaceyH
    Nov 9, 2010 at 21:44
  • 1
    Just about. So you have a function (not called upon click on the radio button) that needs to know whether there is a selected radio box or not? Nov 9, 2010 at 22:33

11 Answers 11

93

$('input[name=myradiobutton]:radio:checked') will get you the selected radio button $('input[name=myradiobutton]:radio:not(:checked)') will get you the unselected radio buttons

Using this you can do this

$('input[name=myradiobutton]:radio:not(:checked)').val("0");

Update: After reading your Update I think I understand You will want to do something like this

var myRadioValue;

function radioValue(jqRadioButton){
  if (jqRadioButton.length) {
    myRadioValue = jqRadioButton.val();
  }
  else {
    myRadioValue = 0;
  }
}

$(document).ready(function () {
  $('input[name=myradiobutton]:radio').click(function () {   //Hook the click event for selected elements
    radioValue($('input[name=myradiobutton]:radio:checked'));
  });

  radioValue($('input[name=myradiobutton]:radio:checked')); //check for value on page load
});
2
  • But the radio button has NOT been selected YET. Thus this won't work alone.
    – StaceyH
    Nov 9, 2010 at 21:37
  • @StaceyH ...When do you want to do this check? OnSubmit of the form? Nov 9, 2010 at 21:39
18

Use the :checked selector to determine if a value is selected:

function getRadioValue () {
    if( $('input[name=myradiobutton]:radio:checked').length > 0 ) {
        return $('input[name=myradiobutton]:radio:checked').val();
    }
    else {
        return 0;
    }
}

Update you can call the function above at any time to get the selected value of the radio buttons. You can hook into it on load and then whenever the value changes with the following events:

$(document).ready( function() {
    // Value when you load the page for the first time
    // Will return 0 the first time it's called
    var radio_button_value = getRadioValue();

    $('input[name=myradiobutton]:radio').click( function() {
        // Will get the newly selected value
        radio_button_value = getRadioValue();
    });
}
9

It will start as soon as the page loads. You can keep it under some events like button click

$("#btn").click(function() { 
var val= $('input[type="radio"]:checked').val();
});
6
jQuery("input:radio[name=myradiobutton]:checked").val();
0
4

Probably the best method (particularly if you want to be able to post a default value), would be to have a hidden radio button that starts out as selected and has your default value. So something like this:

<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />
<input type="radio" name="myradiobutton" value="1" />1
<input type="radio" name="myradiobutton" value="2" />2
<input type="radio" name="myradiobutton" value="3" />3

If you can't modify your html directly, you could add it via script:

$(function() {
    $('input[name=myradiobutton]:radio:first').before('<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />');
});

Here's a demo of that: http://jsfiddle.net/Ender/LwPCv/

2
  • For some reason, this actually does NOT work. It is because I'm using the .click method and the default value is not being "clicked"
    – StaceyH
    Nov 9, 2010 at 21:41
  • After you click something, the reported value would be the value of the element that was just clicked. See this modified demo: jsfiddle.net/Ender/z52PS
    – Ender
    Nov 9, 2010 at 21:44
3

I know this is an old question but I find that the answers are not sufficent enough

The cleanest way to do this is to use this code

$(".myRadio").click(function() {
alert($(this).val());   
});

:-)

Your form input data should look like this

<input type="radio" value="40000" name="pay"  class="myRadio" />
<label for="40000">40000</label>
0
3

This Jquery method returns the default vale 0 when page loads...

$('input[type="radio"]:checked').val();
3

To get the value of the selected Radio Button, Use RadioButtonName and the Form Id containing the RadioButton.

$('input[name=radioName]:checked', '#myForm').val()

OR by only

$('form input[type=radio]:checked').val();
2

You should really be using checkboxes if there will be an instance where something isn't selected.

according to the W3C

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. Note. Since existing implementations handle this case differently, the current specification differs from RFC 1866 ([RFC1866] section 8.1.2.4), which states:

At all times, exactly one of the radio buttons in a set is checked. If none of the elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially.

Since user agent behavior differs, authors should ensure that in each set of radio buttons that one is initially "on".

2

This work for me hope this will help: to get radio selected value you have to use ratio name as selector like this

selectedVal = $('input[name="radio_name"]:checked').val();

selectedVal will have the required value, change the radio_name according to yours, in your case it would b "myradiobutton"

selectedVal = $('input[name="myradiobutton"]:checked').val();
-1

For radio buttons use the following script:

var myRadio = $('input[name=meme_wall_share]');
var checkedValue = myRadio.filter(':checked').val();
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.