Переключить видимость элемента с помощью выбора радио - PullRequest
Новая
       6

Переключить видимость элемента с помощью выбора радио

0 голосов
/ 04 июля 2010

Эта форма имеет скрытую текстуру и видимое текстовое поле.Я хотел бы поменять местами видимость этих элементов, если выбрана опция «D:», но не уверен, как правильно проверить, какая радиокнопка отмечена в любой момент времени: 

<script language="JavaScript" type="text/javascript">

function unhide(event) {  
    event = event || window.event ;
    target = event.target || event.srcElement;  
    if(target.value === "D:") {
        if(target.checked) {
        document.getElementByName('tarea').style.display='';  
        document.getElementByName('tbox').style.display='none';  
        }
     }else {
        if(target.checked) {
        document.getElementByName('tarea').style.display='none';  
        document.getElementByName('tbox').style.display='';   
        }
      }  
}
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide(event)" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide(event)" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide(event)" />C:
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" />
<br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:none;"></textarea>

Ответы [ 4 ]

1 голос
/ 04 июля 2010

Две большие вещи здесь. Во-первых, вы не должны прикреплять свои обработчики событий JavaScript в качестве атрибутов HTML . Вместо этого используйте «традиционный» метод (как показано ниже) или более «расширенный» метод .

Во-вторых, нет необходимости полагаться на объект события, что избавит вас от некоторых кросс-браузерных проблем. 

<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded" id="frm-whatever">
    <input type="radio" name="opttype" value="A:"/>A:
    <input type="radio" name="opttype" value="B:"/>B:
    <input type="radio" name="opttype" value="C:"/>C:
    <input type="radio" name="opttype" value="D:"/>D:
    <br>
    <input type="tbox" name="event" id="inp-tbox"/><br>
    <textarea name="tarea" style="width:580;height:130;display:none;" id="inp-tarea"></textarea>
<form>

<script>
    var toggleFields = (function() {
        var inpTxtBox  = document.getElementById("inp-tbox"),
            inpTxtArea = document.getElementById("inp-tarea");

        return function(node) {
            if ( node.value == "D:" ) {
                inpTxtArea.style.display = 'block';
                inpTxtBox.style.display  = 'none';
            } else {
                inpTxtArea.style.display = 'none';
                inpTxtBox.style.display  = 'block';
            }
        };
    })();

    var radios = document.getElementById("frm-whatever").opttype;

    for ( var i=0, l=radios.length; i<l; ++i ) {
        radios[i].onchange = (function(i) { // closure to lock the value of `i` in this context
            return function() { // return a function as the event handler
                toggleFields(radios[i]);
            }
        })(i);
    } 
</script>

Рабочая демонстрация здесь . Также убедитесь, что код JavaScript включен после формы или используйте событие onload .

1 голос
/ 04 июля 2010 
<script language="JavaScript" type="text/javascript">
function unhide(event) {  
    event = event || window.event ;
    target = event.target || event.srcElement;  
    if(target.value === "D:")
    {
        if(target.checked)
        {

        }
  }
}  
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide()" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide()" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide()" />C:
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" /><br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:;"></textarea>
<input type="submit" name="submit" value="Submit" />
</form>
0 голосов
/ 04 июля 2010

Ни в коем случае не зацикливайтесь на этом, просто передайте элемент непосредственно в функцию 

function toggleInput(ele)
{
    if(ele.value === 'D:') {
        document.getElementsByName('tbox')[0].style.display = 'none';
        document.getElementsByName('tarea')[0].style.display = 'block';
    } else {
        document.getElementsByName('tbox')[0].style.display = 'block';
        document.getElementsByName('tarea')[0].style.display = 'none';
    }

}

//In the element tags, use the following
onclick="toggletInput(this)"

Кроме того, нацеливание на элементы ввода с getElementsByName может быть грязным ... если возможно, добавьте некоторые идентификаторы вте элементы и предназначаются для них непосредственно с getElementById вместо этого.Приведенный выше код предполагает, что существует только один из каждого tbox и tarea или, по крайней мере, они появляются первыми в DOM, так как он нацелен на первый элемент в массиве, возвращаемый getElementsByName.

0 голосов
/ 04 июля 2010

Хорошо, мне нужно изменить свой предыдущий ответ, потому что я понял, что я неправильно прочитал ваш код. getElementByName неверно. Это getElementsByName для начала. Также вы не используете проверено, как вы. Это логическое свойство. Вы должны проверить значение.

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

for (var i=0; i < document.formname.radiobuttonname.length; i++)
{
    if (document.formname.radiobuttonname[i].checked)
    {
        var rad_val = document.formname.radiobuttonname[i].value;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...