获取单选按钮输入的未定义值

时间:2016-06-24 17:45:37

标签: javascript jquery

在表单中,我有以下单选按钮输入:

<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>

我正在尝试按如下方式获取所选值:

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

但我得到的结果是“未定义”

那里有什么问题?

5 个答案:

答案 0 :(得分:3)

你的选择器错了。 opciones的名称不是id。尝试以下。

var forma_pago = $(":radio[name=opciones]:checked").val();
alert(forma_pago);
<script src="https://ajax.googleapis.com/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>

答案 1 :(得分:1)

试试这个

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

答案 2 :(得分:1)

您没有ID为opciones的元素。如果您仍想要具体,请改用attribute equals selector

var forma_pago = $("input[name='opciones']:radio:checked").val();
console.log(forma_pago);
<script src="https://ajax.googleapis.com/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>

答案 3 :(得分:0)

试试这个:

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

答案 4 :(得分:0)

alert ($("input[name=opciones]:checked").val());
$("input[name=opciones]").on('click',function() {
alert ($(this).val());
});
<script src="https://ajax.googleapis.com/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>