通过 AJAX 发送 HTML 单选按钮选择答案

【问题标题】：Sending HTML Radio Button Selection Through AJAX通过 AJAX 发送 HTML 单选按钮选择
【发布时间】：2019-02-20 18:47:25
【问题描述】：

我首先要说我已经研究了大量其他帖子以尝试找到解决方案，但是我无法让我的代码正常工作。

我想要做的是通过 AJAX 将变量从单选按钮选择发送到 PHP。我不想添加提交按钮，我希望在切换单选按钮后处理 PHP 代码。

我的简单代码如下，类似于我已成功用于下拉菜单的 on.change 代码，但我正在努力为单选按钮获得相同的功能。

感谢任何可用的帮助。

HTML 单选按钮

<form>
<div class="label"><b>Include Points?</b></div>
<input type="radio" name="Pts" value="On" /> On
<input type="radio" name="Pts" value="Off" checked="checked" /> Off
</form>

JQUERY AJAX

jQuery(document).ready( function($) {
    jQuery('#Pts').on( 'click', function () {
         Pts = $('input:radio[name=Pts]:checked').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_radio_practice',
            Pts: Pts,
        },
         success:function(output){
             jQuery('#practice').html( output );
         }
     });
    }).click();
});

PHP

$Pts = $_POST['Pts'];
print_r($Pts);

【问题讨论】：

您检查过选择器input:radio[name=Pts]:checked 返回的内容吗？提示：尝试更改为$('input[name=Pts]').prop('checked')

标签： php html ajax radio-button

【解决方案1】：

你没有这个选择器 jQuery('#Pts') (id Pts)。

更改为在input:radio[name=Pts] 上收听change 事件

jQuery(document).ready( function($) {
    jQuery('input:radio[name=Pts]').on('change', function () {
         Pts = $('input:radio[name=Pts]:checked').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_radio_practice',
            Pts: Pts,
        },
         success:function(output){
             jQuery('#practice').html( output );
         }
     });
    });
});

【讨论】：