Question

我想制作一个互动的在线表格。当人们选择第一个问题的一个选项时，相关元素将在选择时显示，并在选择其他选项时隐藏。（选择其他按钮时应显示其他元素）

这是我到目前为止的代码。

＆＃13;

bindingredirect

＆＃13;

function showStuff(id, btn) {
  if (document.getElementById(id).style.display == "none") {
    document.getElementById(id).style.display = 'block';
  } else if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  }
}

＆＃13;

一旦我显示它，当我选择其他选项时，我无法隐藏它。你有什么好建议吗？非常感谢！

Answer 1

你几乎就在那里..只需添加一行代码就可以在每次点击时隐藏两个div。

使用jQuery：

$("#A,#B").hide();

没有jQuery：

document.getElementById("A").style.display = 'none'; document.getElementById("B").style.display = 'none';

请参阅下面的完整工作代码：

function showStuff(id, btn) {
  $("#A,#B").hide(); // hide both each time

  document.getElementById(id).style.display = 'block';

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" />

<div id="A" style="display:none">
  This should display only when A button is clicked
</div>

<div id="B" style="display:none">
  This should display only when B button is clicked
</div>

Answer 2

试试这个：

getDistanceMatrix

Answer 3

我会推荐这个功能

function showStuff(id, btn) {
    document.getElementById('A').style.display = 'none';
    document.getElementById('B').style.display = 'none';

    document.getElementById(id).style.display = 'block';
}

如果您再添加另一个选项，请不要忘记在函数开始时隐藏所有可用选项。

使用jQuery可以更轻松 - 您可以使用选择器$（＆＃39;输入[name = q1]＆＃39;）选择所有输入，并使用一行隐藏所有选项。

$('input[name=q1]').hide();

Answer 4

function showStuff(value,btn) {
  if(value=='A'){
  document.getElementById("A").style.display = 'block';
  document.getElementById("B").style.display = 'none';
  }
   else if(value=='B'){
     document.getElementById("B").style.display = 'block';
  document.getElementById("A").style.display = 'none';
   }
      
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<input name="q1"  type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1"  type="radio" value="B" onchange="showStuff('B', this); return false;"/>

<div id="A"  style="display:none">
This should display only when A button is clicked
</div>

<div id="B"  style="display:none">
This should display only when B button is clicked
</div>  </body>

</html>

如何在选择单选按钮时显示元素，并在未使用javascript选择时隐藏它？

4 个答案: