javascript - 使用 jquery 获取单选按钮的值

Question

这个问题已经有答案了:

How to check a radio button with jQuery? (33 个回答)

已关闭 6 年前。

我有这部分代码:

var checkout_options = $("#checkout").find("input[type='radio']");
    $('#button-account').on('click', function () {
            alert(checkout_options.value);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
    <p>Checkout Options:</p>
    <label for="register">
        <input type="radio" name="account" value="register" id="register" checked>
        <b>Register Account</b></label>
    <br>
    <label for="guest">
        <input type="radio" name="account" value="guest" id="guest">
        <b>Guest Checkout</b>
    </label>
  <input type="button" value="Continue" id="button-account">
</div>

我想要的是获取所选单选按钮的值，但使用我的代码，我只能获取第一个单选按钮值，第二个单选按钮不起作用。请帮助我修复错误。

Answer 1

您需要使用 this 来引用回调内的元素。因此，通过使用 this.value 来获取值(value) 或 $(this).val()方法。虽然避免:checked伪类选择器，否则它只选择第一个元素。

var selected = $("#checkout").find("input[type='radio']");
    selected.change(function(){
        alert(this.value);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
    <p>Checkout Options:</p>
    <label for="register">
        <input type="radio" name="account" value="register" id="register" checked>
        <b>Register Account</b></label>
    <br>
    <label for="guest">
        <input type="radio" name="account" value="guest" id="guest">
        <b>Guest Checkout</b>
    </label>
</div>

<小时/>

您可以使用 :radio 使其变得更简单伪类选择器

$("#checkout :radio").change(function() {
  alert(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
  <p>Checkout Options:</p>
  <label for="register">
    <input type="radio" name="account" value="register" id="register" checked>
    <b>Register Account</b>
  </label>
  <br>
  <label for="guest">
    <input type="radio" name="account" value="guest" id="guest">
    <b>Guest Checkout</b>
  </label>
</div>