Вывести определённую строку в зависимости от значения выбранного переключателя

@Fogg · Регистрация: 23.07.2015

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
    <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
 </body>
</html>

Как сделать что бы выбранный вариант пользователя высвечивался в отдельной строке выше?

@xpoince · 28.07.2015, 18:41

Сразу или после нажатие submit через action?

Добавлено через 10 минут
Ну вот через форму если делать

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
    <meta charset="utf-8">
    <title>Переключатели</title>
</head>
<body>
<?php
$array = array( 1 => 'Не дзен', 2 => 'Дзен', 3 => 'Полный дзен');
$radio = (!empty($_POST['dzen'])) ? $_POST['dzen'] : false;
?>
<p><b>Какое у вас состояние разума?</b> <?=(!empty($array[$radio])) ? $array[$radio] : '' ?></p>
    <form method="post">
    <?php
    foreach ($array as $key => $value) {
 
        $checked = ($key == $radio) ? 'checked' : '';
        echo '</p><input name="dzen" type="radio" value='.$key.' '.$checked.'>'.$value.'</p>';
 
    }
 
    ?>
    <p><input type="submit" value="Выбрать"></p>
</form>
</body>
</html>

@konorw · 28.07.2015, 19:42

Зделай через JQuery

@xpoince · 28.07.2015, 19:52

Просто СДЕЛАЙ РАБ!

В тут на форуме решений куча, вот вам для начало
http://www.w3schools.com/jquer... tml_after2

@pav1uxa · 28.07.2015, 19:57

Fogg, для этого не нужно PHP. И даже jQuery. Достаточно простого javascript.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Переключатели</title>
</head>
<body>
    <div id="dzen"></div>
    <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input id="butt" type="submit" value="Выбрать"></p>
    <script>
        var button = document.getElementById('butt');       
        button.onclick = function(dzen)
        {
            var arr = {"nedzen":"Не дзен", "dzen":"Дзен", "pdzen":"Полный дзен"};           
            var key = document.querySelector('input[name="dzen"]:checked').value;
            var dzen = document.getElementById('dzen');
            dzen.innerHTML = arr[key];
        }
    </script>
 </body>
</html>

@xpoince · 28.07.2015, 20:27

pav1uxa, Согласен, но это и через CSS можно сделать

а вот

JavaScript
1
 var arr = {"nedzen":"Не дзен", "dzen":"Дзен", "pdzen":"Полный дзен"};

Не есть хорошо

@pav1uxa · 28.07.2015, 20:31

Сообщение от xpoince

но это и через CSS можно сделать

Покажите-ка.

@xpoince · 28.07.2015, 20:33

Ну JS код можно до одной строки опустить

JavaScript
1
2
3
4
5
    var button = document.getElementById('butt');
    button.onclick = function()
    {
        dzen.innerHTML = document.querySelector('input[name="dzen"]:checked').value;
    }

Это конечно с учётом если:
value="Не дзен"
value="Дзен"
и.т.д

@pav1uxa · 28.07.2015, 20:44

Сообщение от xpoince

Это конечно с учётом если:
value="Не дзен"
value="Дзен"
и.т.д

Я знаю и что? Но там нету в html-разметке такого. Да и даже при всем при этом можно без

Code
1
var arr = {"nedzen":"Не дзен", "dzen":"Дзен", "pdzen":"Полный дзен"};

сделать. Не меняя html разметки. Вот только я предпочитаю делать, а не языком чесать

Не по теме:

Я уж думал Вы все на CSS сможете реализовать, без javascript...

@xpoince · 28.07.2015, 20:50

Ну а так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Переключатели</title>
    <style>
        .content {
            display: none;
        }
 
        input[name="act"]:checked + .content {
            display: block;
        }
    </style>
</head>
<body>
 
 
    <input type="radio" name="act" value="nedzen">
    <div class="content" id="1">Не дзен</div>
    <p>Не дзен</p>
 
    <input type="radio" name="act" value="dzen">
    <div class="content">Дзен</div>
    <p>Дзен</p>
 
    <input type="radio" name="act" value="pdzen">
    <div class="content">Полный дзен</div>
    <p>Полный дзен</p>
 
</body>
</html>

Ну тут дальше слегка ещё css подправить и всё. Ну это пример что бы суть понять

@pav1uxa · 28.07.2015, 20:57

Сообщение от xpoince

Ну а так

Ну и где кнопка "Выбрать" ?)

Это вообще меняет концепцию страницы автора))

Да и не важно это все, думаю автор ни одного сообщения тут не прочитал, вон он уже новую тему настругал такую же)))

@xpoince · 28.07.2015, 20:59

pav1uxa, Ай, забыл про кнопку

ну а так вот что я хотел показать
http://jsfiddle.net/MonkeyTime/h3E9p/2/

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@konorw 19 / 19 / 11 Регистрация: 15.11.2014 Сообщений: 164
	28.07.2015, 19:42
	Зделай через JQuery 0

@xpoince 182 / 182 / 83 Регистрация: 18.02.2014 Сообщений: 867
	28.07.2015, 19:52
	Просто СДЕЛАЙ РАБ! В тут на форуме решений куча, вот вам для начало http://www.w3schools.com/jquer... tml_after2 0

@xpoince 182 / 182 / 83 Регистрация: 18.02.2014 Сообщений: 867
	28.07.2015, 20:59
	pav1uxa, Ай, забыл про кнопку ну а так вот что я хотел показать http://jsfiddle.net/MonkeyTime/h3E9p/2/ 0