显示/隐藏多个单选组的div

Question

我想创建一个有10多个问题的表格。

每个问题都有三个答案选项，"是"，"否"，"不适用"，通过单选按钮选择。

当选择"No"时，将显示一个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元素。

Answer 2

具有多个相同id的元素是无效的。您有多个id为id=noCheck的元素。当javascript代码执行的函数getElementById()正在寻找一个单一的元素，并返回第一个，这就是为什么只有第一个div显示。

您可以为每个"No"单选按钮分配相同的名称，并使用getElementsByName()代替。这将返回一个元素集合，然后您可以遍历它们以显示必须显示的所有div。

Answer 3

对html代码中的不同元素使用相同的id是一种不好的方式。您需要为不同的问题创建不同的id，例如:

<p>Question 1</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="yesCheck1"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="noCheck1"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="naCheck1"> Not applicable <br>
<div id="ifNo1" style="display:none">
<p>Recommendation goes here</p>

<h2>Section header</h2>        
<p>Question 2</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="yesCheck2"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="noCheck2"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="naCheck2"> Not applicable <br>
<div id="ifNo2" style="display:none">
<p>Recommendation goes here</p>

<p>Question 3</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="yesCheck3"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="noCheck3"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="naCheck3"> Not applicable <br>
<div id="ifNo3" style="display:none">
    <p>Recommendation goes here</p>
</div>

现在在javascript代码中:

function yesnoCheck() {
newId = id.split('k')[1]; //this will give 2 in "q2" (splitting)
var noCheck = "noCheck"
newNoCheck = noCheck.concat(newId);  //if the newId is 2 then it will be "noCheck2"
var ifNo = "ifNo"
newifNo = ifNo.concat(newId);  //if the newId is 2 then it will be "ifNo2"
if (document.getElementById(newNoCheck).checked) {
document.getElementById(newifNo).style.display = 'block';
}
else document.getElementById(newifNo).style.display = 'none';
}

您可以在这里找到工作的jsfield