Форум

nightkon · #1 (**permalink**) 12.01.2012, 10:48

Всем привет!
Нужно, чтобы при выборе "Женщина", выходил блок с дополнительными input-ами.

Код, который есть, и который не работает

:

<!DOCTYPE html>
<html>
<head>
    <title>При выборе input-radio, появляется блок с input-checkbox</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    if($("#radio_whois2").is(":checked")) {
        $("div#are_usure").html("<br /><label><input name='radio_sure' type='radio' value='Да' />Да</label><label><input name='radio_sure' type='radio' value='Нет' />Нет</label>");
    }
    if($("#radio_whois1").is(":checked")) {
        $("div#are_usure").html();
    }
    </script>
    </head>
<body>
<form action="" method="post" target="_blank">
    <p>Укажите свой пол:</p>
    
    <label><input name="radio_whois" type="radio" id="radio_whois1" value="Мужчина" />Мужчина</label>
    <label><input name="radio_whois" type="radio" id="radio_whois2" value="Женщина" />Женщина</label>
    
    <div id="are_usure">
    </div>
</form>
</body>
</html>

Pavel M. · #2 (**permalink**) 12.01.2012, 11:01

наверняка должно быть событие по которому будет код исполняться

почитайте http://learn.javascript.ru/events-change

nightkon · #3 (**permalink**) 12.01.2012, 11:11

Pavel M.,
Спасибо за ссылку, но открыв её я ничего не понял.
Был бы очень сильно вам благодарен, если бы вы мне помогли с кодом.

А нельзя ли сделать, чтобы при нажатии на input[type=radio]#radio_whois у тега div#are_usure изменялись стили, т.е. style="display: block", а при переключении на др. input, то style="display: none" ???

bohdantheone · #4 (**permalink**) 12.01.2012, 12:03

http://jsfiddle.net/bohdantheone/QpyZm/

вот пример, посмотрите

nightkon · #5 (**permalink**) 12.01.2012, 12:17

bohdantheone,
попробовал в свой код записать не получилось, вот код:

<!DOCTYPE html>
<html>
<head>
    <title>При выборе input-radio, появляется блок с input-checkbox</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function toggleSet(rad) {
        var type = rad.value;
        for(var k=0,elm;elm=rad.form.elements[k];k++)
        if(elm.className=='are_usure') 
        elm.style.display = elm.id==type? 'block':'';
    }
    </script>
    <style>
        .are_usure {display: none}
    </style>
    </head>
<body>
<form action="" method="post" target="_blank">
    <p>Укажите свой пол:</p>
    
    <label><input name="radio_whois" type="radio" id="radio_whois1" value="are_usure" onclick="toggleSet(this)" />Мужчина</label>
    <label><input name="radio_whois" type="radio" id="radio_whois2" value="Женщина" />Женщина</label>
    
    <div id="are_usure" class="are_usure">
        <br />
        <label><input name="radio_sure" type="radio" value="Да" />Да</label>
        <label><input name="radio_sure" type="radio" value="Нет" />Нет</label>
    </div>
</form>
</body>
</html>

nightkon · #6 (**permalink**) 12.01.2012, 13:53

Слава Богу, нашел способ

:
Вот код, если кому нужно берите!

<!DOCTYPE html>
<html>
<head>
    <title>При выборе input-radio, появляется блок с input-checkbox</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .vis0 {visibility: hidden}
        .vis1 {visibility: visible}
    </style>
    <script language="javascript" type="text/javascript"><!--
        function ilkHomTh(stayType) {
            var e1 = document.getElementById("are_usure");
            if (stayType=='Мужчина') {e1.className='vis1';}
            if (stayType=='Женщина') {e1.className='vis0';}
        }
    //--></script>
    <style>
        .are_usure {display: none}
    </style>
    </head>
<body>
<form action="" method="post" target="_blank">
    <p>Укажите свой пол:</p>
    
    <label><input name="radio_whois" type="radio" id="radio_whois1" value="Мужчина" onclick="ilkHomTh(this.value);" checked="checked" />Мужчина</label>
    <label><input name="radio_whois" type="radio" id="radio_whois2" value="Женщина" onclick="ilkHomTh(this.value);" />Женщина</label>
    
    <div id="are_usure">
        <br />
        <label><input name="radio_sure" type="radio" value="Да" />Да</label>
        <label><input name="radio_sure" type="radio" value="Нет" />Нет</label>
    </div>
</form>
</body>
</html>

bohdantheone · #7 (**permalink**) 12.01.2012, 16:41

<html>
<body>
<form>
<script>
    function show() {
    document.getElementById('info').style.display='block';
    }
    function hide() {
        document.getElementById('info').style.display='none';
    }
</script>
На сколько Вы себя чувствуете?
<input id="myRadioButton1" type="radio" name="radiobutton" value="radiobutton" onChange="hide()">Мужик
<input id="myRadioButton2" type="radio" name="radiobutton" value="radiobutton" onChange="show()">или Баба
<br>
    <div id="info" style="display:none">
       <label><input name="radio_sure" type="radio" value="Да" />Да</label>
        <label><input name="radio_sure" type="radio" value="Нет" />Нет</label></div>
</form>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript