如何让<field>的内容仅显示一次/在单击的复选框下显示？

Question

additional_details_option2 必须位于下方，并且仅在单击 value="Industry" 时出现。我一直在尝试条件语句的基本逻辑，但是一旦我重新加载页面，即使我没有单击复选框，编辑器字段也已经显示。我知道我应该使用 if/else 和 js 作为条件，但我正在尝试，结果总是相同的。尝试使用 ChatGpt 但仍然无法正常工作。希望你们能帮助我。使用 joomla 作为框架，tinymce 作为编辑器。这是我的代码。

XML 代码：

        <field 
            name="dummy"
            type="checkboxes"
            label="Dummy Sample"
            description="dummy"
        >
            <option value="Number ">Number </option>
            <option value="Industry">Industry</option>
            <option value="journal publication"> journal publication</option>

        </field>

        <field
            name="additional_details_option2"
            type="editor"
            label="Additional Details"
            class="textareafield"
            required="true"
            cols="10"
            rows="5"
            width="100%"
            height="200"
            filter="safehtml"
        />

JS代码：

document.addEventListener('DOMContentLoaded', function () {
    var checkboxOption2 = document.querySelector('input[name="jform[dummy][]"][value="Industry"]');
    var additionalDetailsField = document.querySelector('[name="jform[additional_details_option2]"]');

    checkboxOption2.addEventListener('change', function () {
        if (this.checked) {
            additionalDetailsField.style.display = 'block';
        } else {
            additionalDetailsField.style.display = 'none';
        }
    });
});

这始终是我重新加载后的结果

有什么方法可以更改它或添加代码以满足特定期望吗？

Answer 1

也许你可以使用 JavaScript（我将使用 JQuery）和隐藏属性。

$(document).ready(function() {
        $('#industry').on('change', function() {
            var isChecked = $(this).prop('checked');
            $('field[name="meta]').prop('hidden', !isChecked);
        })
})

您需要将 id“行业”添加到您的选项，值为“行业”。