Question

抱歉英语。

有动态单选按钮但是我正在工作，但我是javascript的新手

当你选择一个选项似乎在另一个中隐藏它？解决这个问题？

RADIOS：•是•否•其他

和div hide ...

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

当我选择“是”然后“其他”出现时，两个div可以隐藏div“hide”。只有当我选择“是”然后选择“其他”时才会这样。

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>

感谢那些帮助我的人，抱歉英语不好。

Answer 1

您需要隐藏功能中的其他元素，如下所示：

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

Answer 2

在Java Script中，if语句始终遵循此方案：

if (condition)
  statement;

如果要在条件为真的情况下执行两个语句，则必须将这些语句放入大括号（{}），以便它们一起执行：

if (condition) {
  statement1;
  statement2;
}

您的第二个if语句看起来像这样（格式正确）：

if (condition)
  statement1;
statement2;

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

Answer 3

这是你的简单例子。

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

Answer 4

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

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

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

最后，JavaScript是/不是/ Java。

在Javascript中隐藏和显示

4 个答案: