选中首个单选按钮时显示评论区的实现问题求助

我需要实现选中ID为GENERAL的单选按钮时显示评论区，但当前代码无法正常工作。相关代码如下：

评论区及测试脚本 #

<div id="commentaireDiv" style="display: none;">
    <label for="commentaire">Commentaire :</label>
    <textarea name="commentaire" id="commentaire" rows="4" cols="50"></textarea>
</div>
<script>
    var boutonGeneral = document.getElementById('GENERAL');
    var zoneCommentaireDiv = document.getElementById('commentaireDiv');

    boutonGeneral.addEventListener('click', function() {
        if (this.checked) {
            zoneCommentaireDiv.style.display = 'block';
        } else {
            zoneCommentaireDiv.style.display = 'none';
        }
    });
</script>

生成单选按钮的PHP代码 #

<?php
$tab_list_action = Actions_Fondation::getTab_list_action();
foreach ($tab_list_action as $soustab) {
    // 不显示带百分比的一次性捐赠选项
    if ($soustab[2] == 'O') {
        // 仅显示正在进行的募捐
        if (($soustab[0] != 'DON_PROMO_2018') and ($soustab[0] != 'DON_PROMO_2018_NOG')) {
            echo "     <input type=\"radio\" name=\"choix_action\" id=\"$soustab[0]\" value=\"$soustab[0]\" required ";
            if ($_var_choix_action == $soustab[0])
                echo ' CHECKED';
            echo ">    <label class=\"\" for=\"$soustab[0]\">$soustab[1]</label>\n<br>";
        }
    }
}
?>

单选按钮数组定义 #

$tab_list_action[] = array("GENERAL", "Au développement de l'UTT en général", 'O');

解决方案 #

1. 确保脚本在DOM加载完成后执行 #

当前脚本可能在单选按钮生成前就运行，导致getElementById('GENERAL')返回null。将脚本包裹在DOMContentLoaded事件中，或者移到页面末尾：

document.addEventListener('DOMContentLoaded', function() {
    var boutonGeneral = document.getElementById('GENERAL');
    var zoneCommentaireDiv = document.getElementById('commentaireDiv');

    // 页面加载时检查初始状态：如果GENERAL已选中，直接显示评论区
    if (boutonGeneral.checked) {
        zoneCommentaireDiv.style.display = 'block';
    }

    // 使用change事件替代click事件，单选按钮状态变化更可靠
    boutonGeneral.addEventListener('change', function() {
        zoneCommentaireDiv.style.display = this.checked ? 'block' : 'none';
    });
});

2. 监听整个单选按钮组的变化（更健壮） #

因为单选按钮属于同组（name="choix_action"），点击其他选项时需要隐藏评论区。监听整个组的变化能覆盖所有场景：

document.addEventListener('DOMContentLoaded', function() {
    var zoneCommentaireDiv = document.getElementById('commentaireDiv');
    var radioButtons = document.querySelectorAll('input[name="choix_action"]');

    // 初始状态检查
    var generalChecked = document.getElementById('GENERAL').checked;
    zoneCommentaireDiv.style.display = generalChecked ? 'block' : 'none';

    // 给每个单选按钮绑定change事件
    radioButtons.forEach(function(radio) {
        radio.addEventListener('change', function() {
            zoneCommentaireDiv.style.display = (this.id === 'GENERAL' && this.checked) ? 'block' : 'none';
        });
    });
});

3. 验证PHP生成的HTML正确性 #

查看页面源代码，确认GENERAL单选按钮的id属性正确输出，没有拼写错误或额外字符，例如：

<input type="radio" name="choix_action" id="GENERAL" value="GENERAL" required>

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