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

Question

我将开始说我已经深入研究了大量其他帖子以尝试找到解决方案但是我无法让我的代码工作。

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

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

感谢任何可用的帮助。

HTML RADIO BUTTONS

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

Answer 1

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

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

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 );
         }
     });
    });
});