Joomla中实现仅点击Industry复选框时显示指定编辑器字段

问题核心 #

页面刷新后additional_details_option2编辑器字段默认显示，未按需求仅在勾选value为“Industry”的复选框时才显示，需从初始状态控制和事件监听两方面修正。

1. 修正字段XML配置 #

确保编辑器字段默认隐藏，同时给字段添加标识类方便JS定位：

<!-- 触发复选框 -->
<field
    name="additional_details_option1"
    type="checkbox"
    label="Select Option"
    description="Check 'Industry' to reveal details editor"
    value="Industry"
/>

<!-- 受控的TinyMCE编辑器字段 -->
<field
    name="additional_details_option2"
    type="editor"
    label="Industry Details"
    description="Enter industry-specific details here"
    class="industry-editor-field"
    style="display:none;"
    editor="tinymce"
/>

• 新增style="display:none;"确保页面加载时默认隐藏
• 添加class="industry-editor-field"作为JS定位的标识

2. 完善JavaScript逻辑 #

需要同时处理页面初始化时的状态检查和复选框变化的实时响应，还要解决隐藏状态下TinyMCE的初始化问题：

原生JS版本 #

document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const industryCheckbox = document.querySelector('input[name="additional_details_option1"][value="Industry"]');
    const editorContainer = document.querySelector('.industry-editor-field').closest('.control-group');

    // 定义显示/隐藏逻辑
    const toggleEditorField = () => {
        if (industryCheckbox.checked) {
            editorContainer.style.display = 'block';
            // 手动初始化TinyMCE（避免隐藏时未加载）
            if (window.tinymce) {
                const editorId = 'additional_details_option2';
                if (!tinymce.get(editorId)) {
                    tinymce.init({
                        selector: `#${editorId}`,
                        // 此处添加你的TinyMCE配置项
                        plugins: 'advlist autolink lists link image charmap print preview',
                        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent'
                    });
                }
            }
        } else {
            editorContainer.style.display = 'none';
        }
    };

    // 页面加载时执行一次，确保初始状态正确
    toggleEditorField();

    // 监听复选框变化事件
    industryCheckbox.addEventListener('change', toggleEditorField);
});

jQuery版本（适配Joomla默认环境） #

jQuery(document).ready(function($) {
    const $checkbox = $('input[name="additional_details_option1"][value="Industry"]');
    const $editorContainer = $('.industry-editor-field').closest('.control-group');

    const toggleEditorField = () => {
        if ($checkbox.is(':checked')) {
            $editorContainer.show();
            // 初始化TinyMCE（仅当未初始化时执行）
            if (window.tinymce) {
                const editorId = 'additional_details_option2';
                if (!tinymce.get(editorId)) {
                    tinymce.init({
                        selector: `#${editorId}`,
                        // 你的TinyMCE配置
                        plugins: 'advlist autolink lists link image charmap print preview',
                        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent'
                    });
                }
            }
        } else {
            $editorContainer.hide();
        }
    };

    // 初始状态检查
    toggleEditorField();

    // 绑定复选框变更事件
    $checkbox.on('change', toggleEditorField);
});

关键注意事项 #

1. 控制整个字段容器：通过.closest('.control-group')定位整个字段的包裹容器，避免只隐藏textarea而残留标签/描述文本
2. 初始状态检查：必须在页面加载时执行一次toggleEditorField，否则页面刷新后会保留默认显示状态
3. TinyMCE初始化：隐藏状态下Joomla可能不会自动初始化编辑器，需在字段显示时手动触发初始化，避免编辑器无法正常使用

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