如何为Gravity Forms单选按钮添加事件实现自动翻页及代码部署位置

我之前刚好做过一模一样的需求，给你梳理几个可行的代码放置方案，还有一些要注意的细节：

一、代码调整小提示（先改对代码） #

你找到的代码没问题，但可以稍微优化下避免jQuery冲突，改成这样更稳妥：

jQuery(document).ready(function($) {
    // 替换成你自己的单选字段选择器
    $('#input_1_26 input:radio').change(function() {
        // 替换成对应表单的下一步按钮选择器
        $('#gform_next_button_1_4').trigger('click');
    });
});

注意：一定要把#input_1_26和#gform_next_button_1_4换成你自己表单的实际ID！可以通过浏览器开发者工具查看元素获取正确的选择器。

二、代码的几个放置位置 #

1. 主题的functions.php文件（最规范的方式） #

适合有一定开发基础的同学，通过WordPress的脚本钩子添加代码，确保只在包含表单的页面加载：

add_action('wp_footer', 'gform_radio_auto_next');
function gform_radio_auto_next() {
    // 替换成你的表单所在页面的ID或slug，比如is_page(123)或者is_page('survey-page')
    if (is_page(123)) {
?>
<script>
jQuery(document).ready(function($) {
    $('#input_1_26 input:radio').change(function() {
        $('#gform_next_button_1_4').trigger('click');
    });
});
</script>
<?php
    }
}

这种方式能避免代码在全站加载，减少不必要的性能消耗。

2. Gravity Forms的自定义HTML字段（最简单的方式） #

不需要碰主题文件，直接在表单的目标页面（就是有单选按钮的那一页）添加一个自定义HTML字段，把代码粘贴进去：

<script>
jQuery(document).ready(function($) {
    $('#input_1_26 input:radio').change(function() {
        $('#gform_next_button_1_4').trigger('click');
    });
});
</script>

把这个HTML字段放在单选字段的后面，发布表单后就能生效。

3. 页面/帖子的自定义HTML区块（适合嵌入单页的表单） #

如果你的表单是直接嵌入在某个WordPress页面或帖子里，直接在页面编辑器中添加一个自定义HTML区块，把代码粘贴进去，放在表单区块的后面即可。

三、注意事项 #

• 确保你的WordPress站点已经加载了jQuery：Gravity Forms默认会加载jQuery，但如果你的主题禁用了，需要重新启用或者手动加载。
• 测试的时候记得清除浏览器缓存，有时候代码修改后不会立即生效。
• 如果是多页表单，要确保每个需要自动跳转的单选字段都对应正确的下一步按钮选择器。

内容的提问来源于stack exchange，提问作者Gareth Thomas