jQuery get value of selected radio button

问题:

The problem statement is simple. I need to see if user has selected a radio button from a radio group. Every radio button in the group share same id.

The problem is that I don\'t have control on how the form is generated. Here is the sample code of how a radio button control code looks like:

<input type=\"radio\" name=\'s_2_1_6_0\' value=\'Mail copy to my bill to address\' id = \"InvCopyRadio\" onchange = \'SWESubmitForm(document.SWEForm2_0,s_4,\"\",\"1-DPWJJF\")\' style=\"height:20;width:25\" tabindex=1997 >

In addition to this when a radio button is selected it doesn\'t add a \"checked\" attribute to the control just text checked (I guess just the property checked without a value). Below is how a selected radio control looks like

<input type=\"radio\" checked name=\'s_2_1_6_0\' value=\'Mail copy to my bill to address\' id = \"InvCopyRadio\" onchange = \'SWESubmitForm(document.SWEForm2_0,s_4,\"\",\"1-DPWJJF\")\' style=\"height:20;width:25\" tabindex=1997 >

Can anybody help me with jQuery code that can help me to get the value of checked radio button?

回答1:

Just use.

$(\'input[name=name_of_your_radiobutton]:checked\').val();

So easy it is.

回答2:

First, you cannot have multiple elements with the same id. I know you said you can\'t control how the form is created, but...try to somehow remove all the ids from the radios, or make them unique.

To get the value of the selected radio button, select it by name with the :checked filter.

var selectedVal = \"\";
var selected = $(\"input[type=\'radio\'][name=\'s_2_1_6_0\']:checked\");
if (selected.length > 0) {
    selectedVal = selected.val();
}

EDIT

So you have no control over the names. In that case I\'d say put these radio buttons all inside a div, named, say, radioDiv, then slightly modify your selector:

var selectedVal = \"\";
var selected = $(\"#radioDiv input[type=\'radio\']:checked\");
if (selected.length > 0) {
    selectedVal = selected.val();
}

回答3:

Simplest way to get the selected radio button\'s value is as follows:

$(\"input[name=\'optradio\']:checked\").val();

No space should be used in between selector.

回答4:

$(\"#radioID\") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(\":checked\") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Make sure to wrap this in the DOM ready function ($(function(){...}); or $(document).ready(function(){...});).

回答5:

1. In your code, jQuery just looks for the first instance of an input with name q12_3, which in this case has a value of 1. You want an input with name q12_3 that is :checked.

$(function(){
    $(\"#submit\").click(function() {     
        alert($(\"input[name=q12_3]:checked\").val());
    });
});

1. Note that the above code is not the same as using .is(\":checked\"). jQuery\'s is() function returns a boolean (true or false) and not an element.

回答6:

<input type=\"radio\" class=\"radioBtnClass\" name=\"numbers\" value=\"1\" />1<br/>
<input type=\"radio\" class=\"radioBtnClass\" name=\"numbers\" value=\"2\" />2<br/>
<input type=\"radio\" class=\"radioBtnClass\" name=\"numbers\" value=\"3\" />3<br/>

This will return, checked radio button value.

if($(\"input[type=\'radio\'].radioBtnClass\").is(\':checked\')) {
    var card_type = $(\"input[type=\'radio\'].radioBtnClass:checked\").val();
    alert(card_type);
}

回答7:

 $(\"input[name=\'gender\']:checked\").val()

for nested attributes

$(\"input[name=\'lead[gender]\']:checked\").val()

Don\'t forget single braces for name

回答8:

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();

回答9:

Get all radios:

var radios = $(\"input[type=\'radio\']\");

Filter to get the one that\'s checked

radios.filter(\":checked\");

OR

Another way you can find radio button value

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

回答10:

Check the example it works fine

<div class=\"dtl_radio\">
  Metal purity : 
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"92\" checked=\"\">
    92 %
  </label>
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"75\">
    75 %
  </label>
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"58.5\">
    58.5 %
  </label>
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"95\">
    95 %
  </label>
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"59\">
    59 %
  </label>
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"76\">
    76 %
  </label>
    <label>
    <input type=\"radio\" name=\"purityradio\" class=\"gold_color\" value=\"93\">
    93 %
  </label>
   </div>

var check_value = $(\'.gold_color:checked\').val();

回答11:

See below for working example with a collection of radio groups each associated with different sections. Your naming scheme is important, but ideally you should try and use a consistent naming scheme for inputs anyway (especially when they\'re in sections like here).

$(\'#submit\').click(function(){
  var section = $(\'input:radio[name=\"sec_num\"]:checked\').val();
  var question = $(\'input:radio[name=\"qst_num\"]:checked\').val();
  
  var selectedVal = checkVal(section, question);
  $(\'#show_val_div\').text(selectedVal);
  $(\'#show_val_div\').show();
});

function checkVal(section, question) {
  var value = $(\'input:radio[name=\"sec\'+section+\'_r\'+question+\'\"]:checked\').val() || \"Selection Not Made\";
  return value;
}

* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>

<div class=\"center\">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec1_r1\" value=\"(1:1) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec1_r1\" value=\"(1:1) NO\"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec1_r2\" value=\"(1:2) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec1_r2\" value=\"(1:2) NO\"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec1_r3\" value=\"(1:3) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec1_r3\" value=\"(1:3) NO\"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec2_r1\" value=\"(2:1) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec2_r1\" value=\"(2:1) NO\"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec2_r2\" value=\"(2:2) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec2_r2\" value=\"(2:2) NO\"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec2_r3\" value=\"(2:3) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec2_r3\" value=\"(2:3) NO\"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec3_r1\" value=\"(3:1) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec3_r1\" value=\"(3:1) NO\"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec3_r2\" value=\"(3:2) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec3_r2\" value=\"(3:2) NO\"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class=\"small\"><input type=\"radio\" name=\"sec3_r3\" value=\"(3:3) YES\"> YES</label>
    <label class=\"small\"><input type=\"radio\" name=\"sec3_r3\" value=\"(3:3) NO\"> NO</label>
  </div>
</div>


<div id=\"formDiv\" class=\"center\">
  <form target=\"#show_val_div\" method=\"post\">
    <p>Choose Section Number</p>
    <label class=\"small\">
      <input type=\"radio\" name=\"sec_num\" value=\"1\"> 1</label>
    <label class=\"small\">
      <input type=\"radio\" name=\"sec_num\" value=\"2\"> 2</label>
    <label class=\"small\">
      <input type=\"radio\" name=\"sec_num\" value=\"3\"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class=\"small\">
      <input type=\"radio\" name=\"qst_num\" value=\"1\"> 1</label>
    <label class=\"small\">
      <input type=\"radio\" name=\"qst_num\" value=\"2\"> 2</label>
    <label class=\"small\">
      <input type=\"radio\" name=\"qst_num\" value=\"3\"> 3</label>
    <br/><br/>
    
    <input id=\"submit\" type=\"submit\" value=\"Show Value\">
    
  </form>
  <br/>
  <p id=\"show_val_div\"></p>
</div>
<br/><br/><br/>

回答12:

if (!$(\"#InvCopyRadio\").prop(\"checked\") && $(\"#InvCopyRadio\").prop(\"checked\"))
    // do something

回答13:

By Name only

$(function () {
    $(\'input[name=\"EventType\"]:radio\').change(function () {
        alert($(\"input[name=\'EventType\']:checked\").val());
    });
});

回答14:

Try this with example

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js\"></script>
<form id=\"myForm\">
<input type=\"radio\" name=\"radio\" value=\"first\"/> 1 <br/>
<input type=\"radio\" name=\"radio\" value=\"second\"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $(\'#myForm\').on(\'click\', function () {
        var value = $(\"[name=radio]:checked\").val();

        alert(value);
    })
});
</script>

回答15:

The best way to explain this simple topic is by giving simple example and reference link:-

In the following example we have two radio buttons. If the user selects any radio button, we will display the selected radio button value in a alert box.

Html:

<form id=\"Demo\">
<input type=\"radio\" name=\"Gender\" value=\"Male\" /> Male <br />
<input type=\"radio\" name=\"Gender\" value=\"Female\" /> Female<br />
<input type=\"radio\" name=\"Gender\" value=\"others\" /> others <br />
</form>

jquery:-

 $(document).ready(function(){
        $(\'#Demo input\').on(\'change\', function() {
            alert($(\'input[name=\"Gender\"]:checked\', \'#Demo\').val());
        });
    });

回答16:

Use Below Code

$(\'input[name=your_radio_button_name]:checked\').val();

Please note, value attribute should be defined so could get \"Male\" or \"Female\" in your result.

<div id=\'div_container\'>
<input type=\"radio\" name=\"Gender\" value=\"Male\" /> Male <br />
<input type=\"radio\" name=\"Gender\" value=\"Female\" /> Female
</div>

回答17:

<div id=\"subscriptions\">
 Company Suscription: <input type=\"radio\" name=\"subsrad\" value=\"1\">
 Customer Subscription:<input type=\"radio\" name=\"subsrad\" value=\"2\">
 Manully Set:<input type=\"radio\" name=\"subsrad\" value=\"MANUAL\">
 NO Subscription:<input type=\"radio\" name=\"subsrad\" value=\"0\">
 </div>

and handle jquery for alert as for th e value set / Changed through div id:

$(\"#subscriptions input\") // select the radio by its id
    .on(\'change\', function(){ // bind a function to the change event
    alert($(\'input[name=\"subsrad\"]:checked\', \'#subscriptions\').val());
            });

it is so easy....:-}

回答18:

Another Easy way to understand... It\'s Working:

HTML Code:

 <input type=\"radio\" name=\"active_status\" class=\"active_status\" value=\"Hold\">Hold 
 <input type=\"radio\" name=\"active_status\" class=\"active_status\" value=\"Cancel\">Cancel 
 <input type=\"radio\" name=\"active_status\" class=\"active_status\" value=\"Suspend\">Suspend

Jquery Code:

$(document).on(\"click\", \".active_status\", function () {
 var a = $(\'input[name=active_status]:checked\').val();  
 (OR)   
 var a = $(\'.active_status:checked\').val();
 alert(a);
});

回答19:

I am not a javascript person, but I found here for searching this problem. For who google it and find here, I am hoping that this helps some. So, as in question if we have a list of radio buttons:

<div class=\"list\">
    <input type=\"radio\" name=\"b1\" value=\"1\">
    <input type=\"radio\" name=\"b2\" value=\"2\" checked=\"checked\">
    <input type=\"radio\" name=\"b3\" value=\"3\">
</div>

I can find which one selected with this selector:

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

Even if there is no element selected, I still don\'t get undefined error. So, you don\'t have to write extra if statement before taking element\'s value.

Here is very basic jsfiddle example.

回答20:

Here are 2 radio buttons namely rd1 and Radio1

<input type=\"radio\" name=\"rd\" id=\"rd1\" />
<input type=\"radio\" name=\"rd\" id=\"Radio1\" /> 

The simplest wayt to check which radio button is checked ,by checking individual is(\":checked\") property

if ($(\"#rd1\").is(\":checked\")) {
      alert(\"rd1 checked\");
   }
 else {
      alert(\"rd1 not checked\");
   }

回答21:

    <input type=\"radio\" name=\'s_2_1_6_0\' value=\'Mail copy to my bill to address\' id = \"InvCopyRadio\" onchange = \'SWESubmitForm(document.SWEForm2_0,s_4,\"\",\"1-DPWJJF\")\' style=\"height:20;width:25\" tabindex=1997 >

$(function() {
      $(\"#submit\").click(function() {
        alert($(\'input[name=s_2_1_6_0]:checked\').val());
      });
    });`

回答22:

HTML Code
<input id=\"is_verified\" class=\"check\" name=\"is_verified\" type=\"radio\" value=\"1\"/>
<input id=\"is_verified\" class=\"check\" name=\"is_verified\" type=\"radio\" checked=\"checked\" value=\"0\"/>
<input id=\"submit\" name=\"submit\" type=\"submit\" value=\"Save\" />

Javascript Code
$(\"input[type=\'radio\'].check\").click(function() {
    if($(this).is(\':checked\')) {
        if ($(this).val() == 1) {
            $(\"#submit\").val(\"Verified & Save\");
        }else{
            $(\"#submit\").val(\"Save\");
        }
    }
});