用隐藏和显示在Javascript中

但是有被工作动态单选按钮，但我新的JavaScript

，当你选择一个选项，在另一个似乎我躲呢？解决这个问题？

收音机：•是•否•其他

和DIV隐藏...

<div id="hide"> FORM FOR YES </div> 
<div id="hide2">FORM FOR OTHER </div>

当我选择“是”，然后选择 “其他” 被显示为两个div可以隐藏DIV “隐藏”。如果我选择“是”，然后选择“其他”，那么这个选项只有这样。

window.onload=function(){ 
    document.getElementById('hide').style.display="none"; 
      document.getElementById('hide2').style.display="none"; 
} 

function possui_dominio() 
{ 
if(document.getElementsByName('form[dominio]')[0].checked) 
document.getElementById('hide').style.display="inline"; 

if(document.getElementsByName('form[dominio]')[1].checked) 
document.getElementById('hide').style.display = 'none'; 
document.getElementById('hide2').style.display = 'none'; 

if(document.getElementsByName('form[dominio]')[2].checked) 
document.getElementById('hide2').style.display="inline"; 
} 

</script>

感谢您对那些谁帮我，对不起不好英语。

来源

2011-11-13 user1044351

感谢您的所有答案它非常快！谢谢。固定！！ – user1044351

这是一个很好的例子，说明为什么一个**总是**包围（条件/循环）块括号。否则，不仅会产生潦草的代码，而且会在几个月后调试或理解，令人难以置信。 – BryanH

你需要隐藏在你的函数其他元素是这样的：

function possui_dominio() 
{ 
    if(document.getElementsByName('form[dominio]')[0].checked){ 
     document.getElementById('hide2').style.display="none"; 
     document.getElementById('hide').style.display="inline"; 
    } 

    if(document.getElementsByName('form[dominio]')[1].checked){ 
     document.getElementById('hide').style.display = 'none'; 
     document.getElementById('hide2').style.display = 'none'; 
    } 

    if(document.getElementsByName('form[dominio]')[2].checked){ 
     document.getElementById('hide2').style.display="inline"; 
     document.getElementById('hide').style.display="none"; 
    } 
}

来源

2011-11-13 17:03:31 nillls

ohhhh = D，谢谢你完美的工作，那就是我错过了。 – user1044351

对此的优化是将表单集合存储在如下变量中： var myForm = document.getElementsByName（'form [dominio]'）; ，然后在if语句中使用myForm [0] .checked，myForm [1] .checked等。这样，DOM遍历只发生一次。 – nillls

-1

How to use jQuery to show/hide divs based on radio button selection?

使用名称，而不是ID（在这种情况下）。名字应该是一样的。

使用像jQuery这样的框架，它比使用纯JavaScript更好地处理浏览器之间的差异。

最后，JavaScript是/不是/ Java。

来源

2011-11-13 16:58:24

而JavaScript不是jQuery。您是否看到过“请为我推荐jQuery解决方案”等句子？ –

这意味着OP希望/ a /解决方案。我提供了解决方案。我看不到你的。 –

@KaeVerens当我看到大多数人问jquery我甚至没有浪费我的时间纯js替代版本，因为你可能会受到批评。 – david

在Java脚本，if报表始终遵循这样的方法：

if (condition) 
    statement;

如果你想在案件执行两个语句条件为真，你必须把那些语句到括号（{}），所以他们都一起执行：

if (condition) { 
    statement1; 
    statement2; 
}

你的第二个if声明看起来是这样的（以及格式化）：

if (condition) 
    statement1; 
statement2;

如您所见，第二条语句与if语句无关，因此始终执行。

来源

2011-11-13 17:02:29 Yogu

这是给你的简单例子。

<html> 
<head> 
<title>Hide/Show Pane Javascript</title> 
<script type="text/javascript"> 
    function togglePane(pane_id){ 
    //alert(pane_id) 
     var current_pane = document.getElementById('pane_'+pane_id); 
     //alert(current_pane); 
     if(pane_id == 1){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_2').style.display = 'none'; 
      document.getElementById('pane_3').style.display = 'none'; 
     } else if(pane_id == 2){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_1').style.display = 'none'; 
      document.getElementById('pane_3').style.display = 'none'; 
     } else if(pane_id == 3){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_1').style.display = 'none'; 
      document.getElementById('pane_2').style.display = 'none'; 
     } 
    } 
</script> 
</head> 
<body> 
<input type="radio" name="option" id="option1" value="1" checked="checked" onclick="togglePane(1)"><label for="option1">Yes</label> 
<input type="radio" name="option" id="option2" value="2" onclick="togglePane(2)"><label for="option2">No</label> 
<input type="radio" name="option" id="option2" value="3" onclick="togglePane(3)"><label for="option3">Other</label> 
<div id="pane_1" style="display: block">Yes Block</div> 
<div id="pane_2" style="display: none">No Block</div> 
<div id="pane_3" style="display: none">Other Block</div> 
</body> 
</html>

来源

2011-11-13 17:13:06

用隐藏和显示在Javascript中

回答

相关问题