Question

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

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

何时＆＃34;否＆＃34;选择一个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

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

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

Answer 2

对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';

}

你可以找到工作的jsfiddle here

Answer 3

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

在具有多个无线电组的表单上显示/隐藏div

3 个答案: