Информация внутри div, которая будет отображаться при нажатии на второй переключатель - PullRequest
Новая
       31

Информация внутри div, которая будет отображаться при нажатии на второй переключатель

0 голосов
/ 06 августа 2011

У меня есть две радио-кнопки и div: 

<input type='radio' name='option' value='test1' />
<input type='radio' name='option' value='test2' />
<div style="display:none">
    Hidden info
</div>

Я хотел бы, чтобы информация внутри div отображалась при нажатии второй радио-кнопки, но как только они переключаются надругой переключатель, я бы хотел, чтобы он исчез.Я также хотел бы сделать это в сыром JavaScript.

Как я могу это сделать?

Ответы [ 6 ]

1 голос
/ 06 августа 2011

Вы можете подключить событие click к обоим переключателям, а затем использовать свойство checked того, который вас интересует, чтобы определить видимость div через его свойство .style.display ( «none» для скрытого «» для default [block]).

Существует множество способов доступа к элементам DOM для переключателей и div. Одним из самых простых является, если вы дадите им id значений: 

<input id="rdoTest1" type='radio' name='option' value='test1' />
<input id="rdoTest2" type='radio' name='option' value='test2' /> 
<div id="targetDiv" style="display:none">
Hidden info
</div>

Тогда это просто ( живой пример ): 

(function() {
    var rdoTest1  = document.getElementById("rdoTest1"),
        rdoTest2  = document.getElementById("rdoTest2"),
        targetDiv = document.getElementById("targetDiv");

    rdoTest1.onclick = rdoTest2.onclick = handleClick;
    function handleClick() {
        targetDiv.style.display = rdoTest2.checked ? "" : "none";
    }
})();

Убедитесь, что этот скрипт находится в конце элемента body, или оберните его в window.onload или аналогичный обработчик.

Но если вы не можете или не хотите использовать значения id, есть много других способов найти элементы & mdash; getElementsByTagName, а затем найдите их по name и т. д.

Удобный справочный материал:

0 голосов
/ 07 августа 2011 
<input type='radio' name='option' value='test1' onchange="((this.checked==true)?(document.getElementById('yourdiv').style.display='none'):(document.getElementById('yourdiv').style.display='block'))" />
<input type='radio' name='option' value='test2' onchange="((this.checked==true)?(document.getElementById('yourdiv').style.display='block'):(document.getElementById('yourdiv').style.display='none'))" /> 
<div id="yourdiv" style="display:none">
    Hidden info
</div>

Это немного долго, но это работает.- > Демонстрация в реальном времени <</em>

0 голосов
/ 06 августа 2011

Вот код, который вам нужен: 

    <html>
<head>
<script type="text/javascript">
    function showhide()
    {
        var opt2 = document.getElementById("option_2");
        var msg = document.getElementById("message");

        if(opt2.checked)
        {
            msg.style.visibility = "visible";
        }
        else {
            msg.style.visibility = "hidden";
        }
    }
</script>
</head>
<body>
<!--The ID is not necessary in the first radio button-->
<input type="radio" name="option" value="test1" id="option_1" onclick="showhide()" />
<input type="radio" name="option" value="test2" id="option_2" onclick="showhide()" /> 
<div style="visibility:hidden;" id="message">Hidden info</div>
</body>
</html>
0 голосов
/ 06 августа 2011 
<script type="text/javascript">
function eventHandler (e) {
    if (! e)
        e = event;
    return e.target || e.srcElement;
}

function handleDivShowing(e) {
    var radio = eventHandler (e);
    var div = document.getElementById('divToShow');

    if(radio.value == 'test2') {
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
}


<input type='radio' name='option' value='test1' onclick="handleDivShowing(event)" />
<input type='radio' name='option' value='test2' onclick="handleDivShowing(event)" /> 
<div id="divToShow" style="display:none">
     Hidden info   
</div>

С обработкой событий у вас есть более общее решение, действительное для более чем одного случая.Привет.

0 голосов
/ 06 августа 2011

Добавьте и Id к каждому элементу ввода: 

<input type='radio' name='option' id="option_1" value='test1' />
<input type='radio' name='option' id="option_2" value='test2' /> 
<div style="display:none" id="message">Hidden info</div>

С помощью ссылки javascript для каждой из переключателей и назначьте видимость в соответствии с их статусом: 

option1 = document.getElementById("option_1");
option2 = document.getElementById("option_2");
message = document.getElementById("message");
option1.onclick = function(){
  message.style.display = "block";
}
option2.onclick = function(){
  message.style.display = "none";
}
0 голосов
/ 06 августа 2011

Это прямо из моей головы, не проверял, но я думаю, что это должно сработать 

<script type="text/javascript">
    function toggleDiv() {
       var e = document.getElementById('toggle');
       if(e.style.display == 'block') {
          e.style.display = 'none';
       } else {
          e.style.display = 'block';
       }
    }
</script>

<input type='radio' name='option' value='test1' onclick="toggleDiv()" />
<input type='radio' name='option' value='test2' onclick="toggleDiv()" /> 
<div id="toggle" style="display:none">
     Hidden info   
</div>
...