TYPO3 9.5 Fluid：判断单选按钮选中状态并渲染对应Partial

先给你指出个小问题：你现在的单选按钮name属性是分开的（Radio1和Radio2），这会导致它们不是同一组，用户可以同时选中两个。单选按钮要实现互斥选中，必须设置相同的name属性，比如统一用questionType，然后用不同的value来区分选项。

下面给你几种可行的实现方式：

1. Fluid原生判断方式（无需额外扩展） #

利用TYPO3 9.5内置的request.form变量获取表单提交的参数，直接在f:if条件里判断选中的值：

<!-- 正确的单选按钮组：name相同，value不同 -->
<f:form.radio name="questionType" value="value1" checked="{request.form.questionType == 'value1'}" /> 问题类型1
<f:form.radio name="questionType" value="value2" checked="{request.form.questionType == 'value2'}" /> 问题类型2

<!-- 动态渲染对应Partial -->
<f:if condition="{request.form.questionType} == 'value1'">
    <f:render partial="Layer1/Partial1" />
</f:if>
<f:if condition="{request.form.questionType} == 'value2'">
    <f:render partial="Layer1/Partial2" />
</f:if>

• 说明：request.form用于获取POST提交的参数，如果是GET请求，改用request.query即可。
• 可选优化：页面首次加载时，可以给其中一个单选按钮设置默认选中，比如<f:form.radio ... checked="true" />，同时默认渲染对应的Partial。

2. VHS扩展的条件判断方式 #

如果你已经安装了VHS扩展（TYPO3常用的视图助手集合），可以用它专门的表单条件视图助手，写法更简洁：

<f:form.radio name="questionType" value="value1" /> 问题类型1
<f:form.radio name="questionType" value="value2" /> 问题类型2

<!-- VHS的单选按钮选中判断 -->
<v:condition.form.radioChecked name="questionType" value="value1">
    <f:render partial="Layer1/Partial1" />
</v:condition.form.radioChecked>

<v:condition.form.radioChecked name="questionType" value="value2">
    <f:render partial="Layer1/Partial2" />
</v:condition.form.radioChecked>

• 说明：VHS的v:condition.form.radioChecked会自动识别请求中的参数，不需要手动写request.form，逻辑更清晰。

3. 前端JavaScript实时切换（无刷新体验） #

如果想要用户选中单选按钮后立即看到Partial变化，无需提交表单，可以结合JavaScript实现前端动态切换，同时保留后端判断逻辑确保数据安全：

<f:form.radio name="questionType" value="value1" class="question-radio" data-partial="partial1" checked="{request.form.questionType == 'value1'}" /> 问题类型1
<f:form.radio name="questionType" value="value2" class="question-radio" data-partial="partial2" checked="{request.form.questionType == 'value2'}" /> 问题类型2

<!-- Partial容器，初始隐藏所有内容 -->
<div id="partial-container">
    <div id="partial1" class="partial-content" style="display:{request.form.questionType == 'value1' ? 'block' : 'none'};">
        <f:render partial="Layer1/Partial1" />
    </div>
    <div id="partial2" class="partial-content" style="display:{request.form.questionType == 'value2' ? 'block' : 'none'};">
        <f:render partial="Layer1/Partial2" />
    </div>
</div>

<script>
// 给所有单选按钮绑定change事件
document.querySelectorAll('.question-radio').forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.checked) {
            // 隐藏所有Partial
            document.querySelectorAll('.partial-content').forEach(el => el.style.display = 'none');
            // 显示当前选中的Partial
            document.getElementById(this.dataset.partial).style.display = 'block';
        }
    });
});
</script>

• 优势：用户体验更好，实时反馈；同时后端依然保留判断逻辑，即使前端被修改，提交后的数据处理依然正确。

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