javascript - 在具有多个单选组的表单上显示/隐藏 div

Question

我正在尝试创建一个包含 10 多个问题的表单。

每个问题都有三个答案选项，"is"“否”“不适用”，可通过单选按钮进行选择。

选择“否”时，会显示一个带有附加信息的 div，这适用于每个问题。

由于不太擅长 Javascript，我咨询了 Stack Overflow，发现了一些东西，但修改它却惨遭失败:

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('noCheck').checked) {
        document.getElementById('ifNo').style.display = 'block';
    }
    else document.getElementById('ifNo').style.display = 'none';

}

</script>


<p>Question 1</p>

<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="naCheck"> Not applicable <br>
    <div id="ifNo" style="display:none">
        <p>Recommendation goes here</p>
    </div>

<h2>Section header</h2>        

<p>Question 2</p>

<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="naCheck"> Not applicable <br>
    <div id="ifNo" style="display:none">
        <p>Recommendation goes here</p>
    </div>


<p>Question 3</p>

<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="naCheck"> Not applicable <br>
    <div id="ifNo" style="display:none">
        <p>Recommendation goes here</p>
    </div>

这只适用于第一个问题，不适用于其他问题。

目的是让它进入 Rails 应用程序，并且问题数量可能很大(超过 10 个)，因此尝试创建一段适用于所有问题的简短代码。

任何来自知道自己在说什么的人(即不是我)的帮助将不胜感激。

Answer 1

不要多次使用相同的 ID。这里https://jsfiddle.net/o2kdb8ej/您可以使用 jQuery 找到简单的解决方案，无需指定任何适用于任意数量问题的 id。主要思想是为每个单选按钮指定值，为页面上的每个单选按钮处理 change 事件，并在该处理程序中检查其值，并根据其值隐藏或显示指定的 p 元素。