HTML单选按钮选中YES时显示指定内容，能否仅用HTML实现？

你不需要使用JavaScript，仅通过HTML+CSS即可完成该需求，也可以选择JS实现，两种方案如下：

方案1：仅HTML+CSS实现 #

实现逻辑：利用CSS的:checked伪类和后续兄弟元素选择器~，控制选中YES时才展示对应内容。

调整后的HTML代码 #

<h3>Did you encounter any issues during your stay?</h3>

<input type="radio" name="radio" id="yesRadio">
<label class="container" for="yesRadio">Yes
    <span class="checkmark"></span>
</label>

<input type="radio" checked="checked" name="radio" id="noRadio">
<label class="container" for="noRadio">No
    <span class="checkmark"></span>
</label>

<!-- 要控制显示隐藏的内容放到统一容器内 -->
<div class="optional-content">
    <h3>We’re so sorry to hear this.
        <br>
        If you would like to share, please tell us what happened.
    </h3>
    <input type="text" id="problem" name="problem" style="height: 200px; background-color: #a4acba; border-color: black;">
</div>

对应的CSS代码 #

/* 默认隐藏可选内容 */
.optional-content {
    display: none;
}
/* 选中YES单选框时展示可选内容 */
#yesRadio:checked ~ .optional-content {
    display: block;
}

方案2：JavaScript实现 #

如果后续需要叠加更复杂的交互逻辑，可以选择JS实现，代码示例如下：

const optionalContent = document.querySelector('.optional-content');
// 监听所有同组单选按钮的切换事件
document.querySelectorAll('input[name="radio"]').forEach(radio => {
    radio.addEventListener('change', () => {
        optionalContent.style.display = radio.id === 'yesRadio' ? 'block' : 'none';
    })
})

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