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

Question

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

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

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

 <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 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

尝试这个：

<script type="text/javascript">
function showStuff(id, btn) {
    document.getElementById("A").style.display = 'none';
    document.getElementById("B").style.display = 'none';
    if (id == "A") {
        document.getElementById("A").style.display = 'block';
    } else {
        document.getElementById("B").style.display = 'block';
    }

}
</script>

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，事情可能会容易得多-您可以使用选择器$（'input [name = q1]'）选择所有输入，而只用一行隐藏所有选项。

$('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 个解决方案

解决方案1
2 已采纳 2016-09-13 09:18:51

解决方案2
1 2016-09-13 09:21:43

解决方案3
1 2016-09-13 09:22:26

解决方案4
0 2016-09-13 09:36:30

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-09-13 09:18:51

解决方案2 1 2016-09-13 09:21:43

解决方案3 1 2016-09-13 09:22:26

解决方案4 0 2016-09-13 09:36:30

解决方案1
2 已采纳 2016-09-13 09:18:51

解决方案2
1 2016-09-13 09:21:43

解决方案3
1 2016-09-13 09:22:26

解决方案4
0 2016-09-13 09:36:30