无法使用 jQuery 从单选表单字段中获取值

Question

我正在尝试制作电子商务网站以进行实践，并希望从 Radio 表单字段中获取值，无论买家是想支付货到付款还是想使用 PayPal 付款。我想获取表单字段值，这样，如果它的 COD，我只向用户显示“已下订单”，但如果它的贝宝，我重定向到支付网关。下面是我的代码<div class="form-check">    <input type="radio" name="paymentmode" id="cod" class="form-check-input" value="cod">    <label for="cod">Cash on Delivery</label>       <input type="radio" name="paymentmode" id="paypal" class="form-check-input" value="paypal">    <label for="paypal">PayPal</label></div>JS代码如下<script>    var radio = $("input[name='paymentmode']:checked").val();    var button = $('.theButton');    button.click(function() {        alert(radio);    });</script>每当我单击按钮时，都会显示警报，但它显示“未定义”而不是单选字段中的值。请帮我编辑：我试图获取一些其他值，例如姓名或地址，而警报框什么也没返回，它是一个空警报框

Answer 1

您的代码不起作用，因为您首先在变量中设置了值，并且每当单选按钮值更改时，它不会影响该变量，这就是您的代码无法按预期工作的原因。

试试下面的工作代码 -

$('.theButton').click(function() {

  console.log($("input[name=paymentmode]:checked").val());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-check">

  <input type="radio" name="paymentmode" id="cod" class="form-check-input" value="cod">

  <label for="cod">Cash on Delivery</label>

  <input type="radio" name="paymentmode" id="paypal" class="form-check-input" value="paypal">

  <label for="paypal">PayPal</label>

  <button class='theButton'>Click It!</button>

</div>

Answer 2

当您单击按钮时，“收音机”将获取数据。

<script>

var radio;

var button = $('.theButton');

    button.click(function() {

        radio = $("input[name='paymentmode']:checked").val();

        alert(radio);

        });

</script>