Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Зависимые поля. Чекбокс и текстовое поле (https://javascript.ru/forum/dom-window/23517-zavisimye-polya-chekboks-i-tekstovoe-pole.html)

Jetpilot 26.11.2011 16:40

Зависимые поля. Чекбокс и текстовое поле
 
Хочу сделать 2 радиокнопки. При нажатии на Радиокнопку1, повляется Поле1. А при нажатии на Радиокнопку2, появляются Поле2 и Поле3. При этом Поле1 исчезает.

ksa 27.11.2011 12:07

Цитата:

Сообщение от Jetpilot
Хочу сделать

Таки делай... Что мешает?

Jetpilot 27.11.2011 17:16

Таки я с javascript не дружу)) Набросал тут малехо, незнаю правда насколько корректно.

upd: Не работает в ff, opera, chrome. Может кто подскажет?

<script>
function izmen_rad(chto){
if(chto==1){
document.getElementById("pole1").style.display="";
document.getElementById("pole2").style.display="none";
document.getElementById("pole3").style.display="none";
document.getElementById("chek2").checked=false;
document.getElementById("chek1").checked=true;
}
if(chto==2){
document.getElementById("pole1").style.display="none";
document.getElementById("pole2").style.display="";
document.getElementById("pole3").style.display="";
document.getElementById("chek1").checked=false;
document.getElementById("chek2").checked=true;
}
}
</script>
<table>
<tr>
<td>
Радио1:<input id="chek1" type="radio" value="1" onclick="izmen_rad(this.value)" name="chek1"><br />
Радио2:<input id="chek2" type="radio" value="2" onclick="izmen_rad(this.value)" name="chek2">
</td>
</tr>
<tr>
<td id="pole1" style="display:none;">
Поле1:<input type="text" name="pole1">
</td>
</tr>
<tr>
<td id="pole2" style="display:none;">
Поле2 :<input name="pole2"><br />
Поле3:<input name="pole3" >
</td>
</tr>
</table>

Pavel M. 28.11.2011 14:00

Цитата:

Сообщение от Jetpilot
Не работает в ff, opera, chrome. Может кто подскажет?

чтобы ваш пример заработал можно его немного поправить

для радиокнопок имя одинаковое

и закомментировал лишнее

<script>
function izmen_rad(chto){
    if(chto==1){
        document.getElementById("pole1").style.display="";
        document.getElementById("pole2").style.display="none";
        //document.getElementById("pole3").style.display="none";
        //document.getElementById("chek2").checked=false;
        //document.getElementById("chek1").checked=true;
    }
    if(chto==2){
        document.getElementById("pole1").style.display="none";
        document.getElementById("pole2").style.display="";
        //document.getElementById("pole3").style.display="";
        //document.getElementById("chek1").checked=false;
        //document.getElementById("chek2").checked=true;
    }
}
</script>


<table>
<tr>
<td>
Радио1:<input id="chek1" type="radio" value="1" onclick="izmen_rad(this.value)" name="*!*chek12*/!*"><br />

Радио2:<input id="chek2" type="radio" value="2" onclick="izmen_rad(this.value)" name="*!*chek12*/!*">
</td>
</tr>
<tr>
<td id="pole1" style="display:none;">
Поле1:<input type="text" name="pole1">
</td>
</tr>
<tr>
<td id="pole2" style="display:none;">
Поле2 :<input name="pole2"><br />
Поле3:<input name="pole3" >
</td>

</tr>
</table>

Jetpilot 28.11.2011 14:49

Pavel M., спасибо Вам большое за помощь. Все работает отлично. Надеюсь еще кому-нибудь пригодится.


Часовой пояс GMT +3, время: 07:54.