WordPress Gravity Forms quiz插件实现每个fieldset仅可勾选单个复选框

适配后的实现方案 #

这里提供两种可选实现，都可以自动适配任意数量的quiz问题字段，不需要手动指定ID：

jQuery版本（兼容你原有参考代码的依赖环境）

jQuery(function ($) {
    // 仅作用于quiz类型的字段复选框，不影响页面其他复选框
    $('fieldset[data-field-class="gquiz-field"] .gfield-choice-input[type="checkbox"]').on('change', function () {
        // 自动定位到当前点击复选框所属的问题选项组
        const $sameGroup = $(this).closest('.gfield_checkbox');
        // 同组内其他复选框全部取消勾选
        $sameGroup.find('.gfield-choice-input[type="checkbox"]').not(this).prop('checked', false);
    });
});

原生JS版本（不需要依赖jQuery）

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('fieldset[data-field-class="gquiz-field"] .gfield-choice-input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            if (!this.checked) return;
            // 自动定位到当前点击复选框所属的问题选项组
            const sameGroup = this.closest('.gfield_checkbox');
            // 同组内其他复选框全部取消勾选
            sameGroup.querySelectorAll('.gfield-choice-input[type="checkbox"]').forEach(el => {
                if (el !== this) el.checked = false;
            });
        });
    });
});

实现说明 #

• 选择器精准限定了生效范围，只会修改quiz附加组件对应的字段逻辑，不会干扰表单其他部分或者页面其他复选框的正常使用
• 采用closest方法自动匹配当前选项所属的问题组，不管表单有多少个问题都能自动适配，不需要提前配置ID
• 使用change事件代替click事件，兼容键盘操作、脚本触发勾选等更多场景，兼容性更好
• 你可以将代码添加到主题自定义JS区块、Gravity Forms自定义代码设置，或者页面页脚的自定义代码位置即可生效

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