Question

我有这部分代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您需要使用this来引用回调中的元素。因此，使用 this.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>

Answer 2

您的处理程序仅附加到已选中的单选按钮，因此第二个单选按钮不存在处理程序。将处理程序附加到两个单选按钮：

var $radioBtn = $( "#checkout" ).find( "input[type='radio']" );

$radioBtn.on( 'change', function() {
  if ( this.checked ) {
    alert( this.value );
  }
});

Answer 3

它不起作用，因为您只为最初检查的值注册事件处理程序。这是如何使其动态反映价值变化：

var selected = $("#checkout").find("input[name='account']");
selected.change(function(){
    alert($(this).val());
});

这也确保只包含当前的单选按钮组，因此您可以使用其他组。

的jsfiddle： https://jsfiddle.net/sjmhdasw/

Answer 4

只需使用

$("input[type='radio']").on("change", function() { console.log(this.id + " checked !"); });

它在无线电类型的所有输入上绑定一个事件监听器！

无需将选择器存储在变量中（除非您正在使用它，在代码中的其他位置执行某些操作）

使用jquery获取单选按钮的值

4 个答案: