Question

您好我在这段代码上工作了很长时间，并且拥有HTML代码和JavaScript。所以这是我的HTML代码。

<div id="showDiv" style="display:none;" class"answer_radio" > <tr>
<td><input type="radio" name="inputC[0]" value="1" /> 1</td>
<td><input type="radio" name="inputC[0]" value="2" /> 2</td>
 <td><input type="radio" name="inputC[0]" value="3" /> 3</td>
</tr></div>
<div id="placeDiv" style="display:none;" class"answer_radio" > <tr>
<td><input type="radio" name="inputC[0]" value="4" /> 4</td>
<td><input type="radio" name="inputC[0]" value="5" /> 5</td>
<td><input type="radio" name="inputC[0]" value="6" /> 6</td>
</tr></div>
<select id="car" value="Show Div" >
<option value="volvo" name="volvo" onclick="showDiv()">Volvo</option>
<option value="saab" name="saab" onclick="placeDiv()">Saab</option>
<option value="opel">Opel</option>
<option value="audi" >Audi</option>

和JavaScript代码：

function showDiv() {
   document.getElementById('showDiv').style.display = "block"; 
}
function placeDiv() {
   document.getElementById('placeDiv').style.display = "block";
}

正如您所看到的，如果您运行该代码，它将显示带有汽车的下拉列表。如果点击＆＃34; volvo＆＃34;，则会显示＆＃34; 1,2,3＆＃34;单选按钮。如果点击＆＃34;萨博＆＃34; ，然后将显示＆＃34; 4,5,6＆＃34;单选按钮。但是有我的问题...... 如果我先点击＆＃34;沃尔沃＆＃34;然后＆＃34;萨博＆＃34;然后会告诉我所有6个radiobuttons。但我想要点击＆＃34;沃尔沃＆＃34;然后＆＃34; saab＆＃34;如果有人理解，只显示3个radiobutton ... 我只需要＆＃34; 1,2,3＆＃34;或＆＃34; 4,5,6＆＃34; radiobuttons显示。这不是完整的代码，我将为其他车辆做...

Answer 1

也许这会有所帮助？这不是一个很好的编码技术，因为它会导致大量的代码重复，特别是当你添加更多的汽车......

function showDiv() {
   document.getElementById('showDiv').style.display = "block"; 
   document.getElementById('placeDiv').style.display = "none"; 
}
function placeDiv() {
   document.getElementById('placeDiv').style.display = "block";
   document.getElementById('showDiv').style.display = "none"; 
}

Answer 2

隐藏所有单选按钮，然后才能显示正确的按钮。

[].slice.call(document.querySelectorAll('input[type="radio"]')).forEach(function (elem, index) {
   elem.style.display = "none";
});

如何组织显示Div和关闭

2 个答案: