Fatal编程技术网

在Javascript中隐藏和显示

javascript

在Javascript中隐藏和显示,javascript,Javascript,对不起英语 有动态单选按钮 但是，我对javascript还不太熟悉 当你选择一个选项时，当我隐藏它时，它似乎在另一个选项中？修好这个 收音机：•是•否•其他 和div隐藏 <div id="hide"> FORM FOR YES </div> <div id="hide2">FORM FOR OTHER </div> 是的表单 其他表格 当我选择“是”然后选择“其他”时，显示为两个div可以隐藏div“hide”。只有在我选择“是”然后选择

对不起英语

有动态单选按钮 但是，我对javascript还不太熟悉

当你选择一个选项时，当我隐藏它时，它似乎在另一个选项中？修好这个

收音机：•是•否•其他

和div隐藏

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

是的表单
其他表格
当我选择“是”然后选择“其他”时，显示为两个div可以隐藏div“hide”。只有在我选择“是”然后选择“oher”时，才会出现这种情况。 

window.onload=function（）{
document.getElementById（'hide'）.style.display=“无”；
document.getElementById（'hide2'）.style.display=“无”；
}
函数possui_dominio（）
{
if（document.getElementsByName（'form[dominio]'）[0]。选中）
document.getElementById（'hide'）.style.display=“inline”；
if（document.getElementsByName（'form[dominio]'）[1]。选中）
document.getElementById（'hide'）.style.display='none'；
document.getElementById（'hide2'）.style.display='none'；
if（document.getElementsByName（'form[dominio]'）[2]。选中）
document.getElementById（'hide2'）.style.display=“inline”；
}
谢谢你帮助我，抱歉英语不好。

使用名称，而不是id（在本例中）。名字应该是一样的

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

最后，JavaScript是/not/Java。

使用名称，而不是id（在本例中）。名字应该是一样的

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

最后，JavaScript是/not/Java。

在Java脚本中，
if
语句始终遵循以下方案：

if (condition)
  statement;
如果要在条件为true的情况下执行两条语句，则必须将这些语句放在大括号（{}）中，以便它们一起执行：

if (condition) {
  statement1;
  statement2;
}
您的第二个
if
语句如下所示（格式良好）：

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

在Java脚本中，
if
语句始终遵循以下方案：

if (condition)
  statement;
如果要在条件为true的情况下执行两条语句，则必须将这些语句放在大括号（{}）中，以便它们一起执行：

if (condition) {
  statement1;
  statement2;
}
您的第二个
if
语句如下所示（格式良好）：

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

您需要像这样隐藏函数中的其他元素：

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";
    }
}
您需要隐藏函数中的其他元素，如下所示：

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";
    }
}
这是一个简单的例子

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


隐藏/显示窗格Javascript
功能切换窗格（窗格id）{
//警报（窗格id）
var current\u pane=document.getElementById（'pane\u'+pane\u id）；
//警报（当前窗格）；
如果（窗格id==1）{
当前_pane.style.display='block'；
document.getElementById（'pane_2'）。style.display='none'；
document.getElementById（'pane_3'）。style.display='none'；
}else if（窗格id==2）{
当前_pane.style.display='block'；
document.getElementById（'pane_1'）。style.display='none'；
document.getElementById（'pane_3'）。style.display='none'；
}else if（窗格id==3）{
当前_pane.style.display='block'；
document.getElementById（'pane_1'）。style.display='none'；
document.getElementById（'pane_2'）。style.display='none'；
}
}
对
不
其他
是街区
无障碍
其他区块
这是一个简单的例子

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


隐藏/显示窗格Javascript
功能切换窗格（窗格id）{
//警报（窗格id）
var current\u pane=document.getElementById（'pane\u'+pane\u id）；
//警报（当前窗格）；
如果（窗格id==1）{
当前_pane.style.display='block'；
document.getElementById（'pane_2'）。style.display='none'；
document.getElementById（'pane_3'）。style.display='none'；
}else if（窗格id==2）{
当前_pane.style.display='block'；
document.getElementById（'pane_1'）。style.display='none'；
document.getElementById（'pane_3'）。style.display='none'；
}else if（窗格id==3）{
当前_pane.style.display='block'；
document.getElementById（'pane_1'）。style.display='none'；
document.getElementById（'pane_2'）。style.display='none'；
}
}
对
不
其他
是街区
无障碍
其他区块
，JavaScript不是jQuery。您是否看到诸如“请为我推荐jQuery解决方案”之类的句子？这意味着OP想要/a/solution。我提供了一个解决方案。我看不到你的版本。@KaeVerens当我看到大多数人要求使用jquery时，我甚至没有浪费时间使用纯js替代版本，因为你可能会受到批评。@KaeVerens也是网站规则中规定的，
ops
accepped答案可能不是正确/最好的解决方案，JavaScript不是jquery。您是否看到诸如“请为我推荐jQuery解决方案”之类的句子？这意味着OP想要/a/solution。我提供了一个解决方案。我看不到你的版本。@KaeVerens当我看到大多数人要求使用jquery时，我甚至没有浪费时间使用纯js替代版本，因为你可能会受到批评。@KaeVerens也是网站规则中规定的，
ops
acceped答案可能不是正确/最佳的解决方案Ohhh=D，谢谢你工作得很好，这就是我所缺少的。对此的优化是将表单集合存储在如下变量中：var myForm=document.getElementsByName（'form[dominio]”）；然后在if语句中使用myForm[0]。选中，myForm[1]。选中等。这样，DOM遍历只发生一次。ohhhh=D，谢谢你工作得很好，这就是我缺少的。对此的优化是存储表单