javascript 如何根据单选按钮单击显示和隐藏 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22678121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show and hide divs based on radio button click?
提问by user3454436
I am trying to do show and hide div base on radio button click but it can not work perfect. I am currently using javascript function to control the content display.
我正在尝试根据单选按钮单击来显示和隐藏 div，但它无法完美运行。我目前正在使用 javascript 函数来控制内容显示。
This is javascript code :
这是 javascript 代码：
function udatabase() {
document.getElementById('ifCSV').style.display = "none";
}
function ucsv() {
document.getElementById('ifCSV').style.display = "block";
}
This is my radio button:
这是我的单选按钮：
<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
<div id="ifCSV" style="display:none">
<input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
</div>
After click on csv, there is no response in html page.
点击csv后，html页面没有响应。
回答by user3454436
Your javascript onclick function name cannot same with your id name inside input text. You should change one of the name.
您的 javascript onclick 函数名称不能与输入文本中的 id 名称相同。您应该更改其中一个名称。
Your html code here:
你的 html 代码在这里：
<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
After edited
编辑后
<input type="radio" name="data" onclick="udatabase()" id="tdatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="tcsv"> CSV <br/>
This should be work properly after you change the name.
更改名称后，这应该可以正常工作。
回答by HymanOB MAJANA
<script type="text/javascript">
window.onload = function() {
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
}
function yesnoCheck() {
var testA=document.getElementById('testAmount').value;
var dola=document.getElementById('fxd').value;
if (document.getElementById('s').checked) {
if(testA>50000){
document.getElementById('ifTSH').style.display = 'block';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
else{
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
}
if (document.getElementById('d').checked) {
if((testA*dola)>50000){
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'block';
document.getElementById('ifUSD1').setAttribute("required", "true");
}
else {
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
}
}
