In a form I have following radio button input:

<div class="form-group col-sm-12">
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_1" value="Efectivo" checked>Efectivo
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_2" value="Tarjeta">Tarjeta
    </label>
  </div>

I am trying to get the selected value as follows:

var forma_pago = $("#opciones input:radio:checked").val();
alert (forma_pago);

But I am getting as result "Undefined"

what is wrong there?

In a form I have following radio button input:

<div class="form-group col-sm-12">
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_1" value="Efectivo" checked>Efectivo
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_2" value="Tarjeta">Tarjeta
    </label>
  </div>

I am trying to get the selected value as follows:

var forma_pago = $("#opciones input:radio:checked").val();
alert (forma_pago);

But I am getting as result "Undefined"

what is wrong there?

• javascript
• jquery

• You are using #opciones to get val but that's the name not the id. – bvoleti Commented Jun 24, 2016 at 17:48
• $("#opciones_1 input[type=radio]:checked") would be more along the lines of what you're trying for, but why not just $("#opciones_1")? – master565 Commented Jun 24, 2016 at 17:50
• the wrong there... is this selector #opciones input:radio:checked – user2560539 Commented Jun 24, 2016 at 18:09

5 Answers 5

Your selector is wrong. opciones is name not id. Try like following.

var forma_pago = $(":radio[name=opciones]:checked").val();
alert(forma_pago);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label>
    <input type="radio" name="opciones" id="opciones_1" value="Efectivo" checked>Efectivo
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="opciones" id="opciones_2" value="Tarjeta">Tarjeta
  </label>
</div>

try this

 var forma_pago = $("input[name=opciones]:checked").val();
    alert (forma_pago);

You do not have an element with the id of opciones. If you still want to be specific, use the attribute equals selector instead:

var forma_pago = $("input[name='opciones']:radio:checked").val();
console.log(forma_pago);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-12">

  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_1" value="Efectivo" checked>Efectivo
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_2" value="Tarjeta">Tarjeta
    </label>
  </div>

try this:

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

alert ($("input[name=opciones]:checked").val());
$("input[name=opciones]").on('click',function() {
alert ($(this).val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-12">
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_1" value="Efectivo" checked>Efectivo
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="opciones" id="opciones_2" value="Tarjeta">Tarjeta
    </label>
  </div>