使用jquery获取单选按钮的值[重复]

Posted 2023-03-05

【中文标题】使用jquery获取单选按钮的值[重复]

【英文标题】：Get the value of a radio button using jquery [duplicate]

【发布时间】：2016-12-11 23:07:36

【问题描述】：

我有这部分代码：

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>

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

【参考方案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>

【讨论】：

感谢您提供帮助，但它不起作用。试试你的代码

【参考方案2】：

随便用

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

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

无需将选择器存储在变量中（除非你正在使用它，在你的代码中的其他地方）

【参考方案3】：

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

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

这也确保仅包含当前单选按钮组，因此您可以拥有其他单选按钮组。

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

【参考方案4】：

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

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

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