Как подписать радиокнопку?

@inquisitor · Регистрация: 22.12.2015

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

JavaScript
1
2
3
4
5
6
7
8
9
function setName(){
    document.getElementById('v1').innerHTML = "v1123467 ";
    document.getElementById('v2').value = "v1123467 ";
    document.getElementById('v3').innerHTML = "v1123467 ";
    
    document.getElementById("v1").style.opacity =1;
    document.getElementById("v2").style.opacity =1;
    document.getElementById("v3").style.opacity =1;
}

CSS
1
2
3
4
.radio
{
opacity:0;
}

HTML5
1
2
3
4
5
<p><input name="dzen" type="radio" class="radio" id="v1" value="nedzen"></p>
    <p><input name="dzen" type="radio" class="radio" id="v2" value="dzen"></p>
    <p><input name="dzen" type="radio" class="radio" id="v3" value="pdzen"></p>
    
    <p><input type="submit" onclick="setName()" value="Setname"></p>

Сами радиокнопки появляются,надписей не видно,а при просмотре hml code надписи есть.

@inquisitor · 16.05.2019, 07:01 **[ТС]**

@Пифагор · 16.05.2019, 07:30

inquisitor, у элементов, не требующих закрывающего тега, нет свойства innerHTML, так же как и innerText, и textContent. Если уж так важно вставить текст справа от радио через JS, то можно сделать так:

JavaScript
1
document.getElementById('v1').parentNode.innerHTML += "v1123467 ";

@inquisitor · 16.05.2019, 08:12 **[ТС]**

Сообщение от Пифагор

inquisitor, у элементов, не требующих закрывающего тега, нет свойства innerHTML, так же как и innerText, и textContent. Если уж так важно вставить текст справа от радио через JS, то можно сделать так:

Если без плюса то выводится само значение,с += выводится радиокнопка со значением
а как очищать предыдущее значение,а не додавать его спереди?

@amr-now · 16.05.2019, 08:16

Здравствуйте.
Наверно, прикольнее добавить <label>:

PHP/HTML
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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .radio {
            opacity: 0;
        }
    </style>
</head>
<body>
    <p><input name="dzen" type="radio" class="radio" id="v1" value="nedzen"></p>
    <p><input name="dzen" type="radio" class="radio" id="v2" value="dzen"></p>
    <p><input name="dzen" type="radio" class="radio" id="v3" value="pdzen"></p>
 
    <p><input type="submit" value="Setname"></p>
    <script>
        document.querySelector("[type=submit]").onclick = setName;
 
        function setName() {
            let captions = ["Первый", "Второй", "Третий"];
            for (let i = 1; i <= 3; i++) {
                let el = document.getElementById("v" + i);
                el.insertAdjacentHTML("afterend", `<label for="v${i}">${captions[i - 1]}</label>`);
                el.style.opacity = 1;
            }
        }
    </script>
</body>
</html>

Если мы хотим добавить метку не после радиокнопки, а перед, то:

JavaScript
1
el.insertAdjacentHTML("beforebegin", `<label for="v${i}">${captions[i - 1]}</label>`);

Сейчас лучше не вставлять вызов функции в атрибут HTML-элемента, а привязывать обработчик события именно в скрипте.
Иначе нативные модули ES6 работать не будут.

Добавлено через 3 минуты
---
Метка <LABEL> хороша тем, что при нажатии на метку считается, что нажат элемент, привязанный атрибутом for="элемент".

@Пифагор · 16.05.2019, 08:19

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

а как очищать предыдущее значение,а не додавать его спереди?

Просто удаляете второго ребенка родительского элемента.

@amr-now · 16.05.2019, 09:54

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

а как очищать предыдущее значение,а не додавать его спереди?

Если нужно одноразово добавить надпись и никогда не заменять её другой надписью,
то проще всего ничего не делать, если такая надпись уже есть:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        function setName() {
            let captions = ["Первый", "Второй", "Третий"];
 
            for (let i = 1; i <= 3; i++) {
                let el = document.getElementById("v" + i);
                if (!el.nextElementSibling) {
                    el.insertAdjacentHTML("afterend", `<label for="v${i}">${captions[i - 1]}</label>`);
                    el.style.opacity = 1;
                }
            }
        }

Добавлено через 38 минут
Вариант с безусловной заменой <label> на другую <label> html-текстом:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        function setName() {
            let captions = ["Первый", "Второй", "Третий"];
 
            for (let i = 1; i <= 3; i++) {
                let el = document.getElementById("v" + i), next;
                if (next = el.nextElementSibling)
                    next.remove(); // более старый способ el.parentNode.removeChild(next);
 
                el.insertAdjacentHTML("afterend", `<label for="v${i}">${captions[i - 1]}</label>`); 
                // Не сработает el.after(`<label for="v${i}">${captions[i - 1]}</label>`);
                // Потому что не позволяет вставлять HTML-строку
                el.style.opacity = 1;
            }
        }

@inquisitor · 16.05.2019, 20:03 **[ТС]**

Сообщение от amr-now

Если нужно одноразово добавить надпись и никогда не заменять её другой надписью,
то проще всего ничего не делать, если такая надпись уже есть:

Заменять нужно надпись после радиокнопки только на последнюю,а все предыдущие стирать.

Добавлено через 1 минуту
К сожалению у меня не получилось,надписи все добавляются

PHP/HTML
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
33
34
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 
    <p><input name="dzen" type="radio" class="radio" id="v1" value="nedzen"></p>
    <p><input name="dzen" type="radio" class="radio" id="v2" value="dzen"></p>
    <p><input name="dzen" type="radio" class="radio" id="v3" value="pdzen"></p>
    
    <p><button onclick="setName()">Попробовать ещё</button></p>
    
    <style>
    .radio
    {
    opacity:0;
    }
    </style>    
 
    <script>
    function setName()
    {
        document.getElementById("v1").style.opacity =1;
        document.getElementById("v2").style.opacity =1;
        document.getElementById("v3").style.opacity =1;
        
        document.getElementById('v1').parentNode.innerHTML += "10 ";
        document.getElementById('v2').parentNode.innerHTML += "11 ";
        document.getElementById('v3').parentNode.innerHTML += "12 ";
    }
    </script>
</body>
</html>

Добавлено через 1 минуту
И еще как спрятать радиокнопки,opasity вскрывает но они в коде есть и окне браузере видно отведенное под них пустое место

@amr-now · 16.05.2019, 20:13

inquisitor, прошу пояснить, надписи для радиокнопок одноразово должны проставиться
или именно нужно постоянно стирать предыдущую надпись возле радиокнопки и ставить другую надпись?

От этого зависит, как писать скрипт.

Добавлено через 2 минуты
----------
style="display:none" полностью скрывает без пустого места.

@inquisitor · 16.05.2019, 21:34 **[ТС]**

Сообщение от amr-now

именно нужно постоянно стирать предыдущую надпись возле радиокнопки и ставить другую надпись?

именно нужно постоянно стирать предыдущую надпись возле радиокнопки и ставить другую

@Пифагор · 16.05.2019, 21:42

inquisitor, а что мешает заключить эту надпись в span с каким-нить id и оперировать innerHTML?

HTML5
1
<p><input name="dzen" type="radio" class="radio" id="v1" value="nedzen"><span>v1123467</span></p>

@amr-now · 16.05.2019, 21:58

Пифагор, с таким же успехом и удобнее использовать изначально присутствующую метку <label>

@Пифагор · 16.05.2019, 22:03

Сообщение от amr-now

с таким же успехом и удобнее использовать изначально присутствующую метку <label>

Согласен.

@inquisitor · 16.05.2019, 23:42 **[ТС]**

Сообщение от Пифагор

inquisitor, а что мешает заключить эту надпись в span с каким-нить id и оперировать innerHTML?

Гений,спасибо.
Изначально был абзац Р,а не метка.

@inquisitor · 16.05.2019, 23:51 **[ТС]**

Добавил идишник со спаном,теперь проблема,надпись под радиокнопкой,а не справа

PHP/HTML
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
33
34
35
36
37
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 
    <p><input name="dzen" type="radio" class="radio" id="v1" value="nedzen"><span id="v11"></span></p>
    <p><input name="dzen" type="radio" class="radio" id="v2" value="dzen"><span id="v12"></span></p>
    <p><input name="dzen" type="radio" class="radio" id="v3" value="pdzen"><span id="v13"></span></p
    <p><button onclick="setName()">Попробовать ещё</button></p>
    
    <style>
    .radio
    {
    display:none;
    }
    </style>    
 
    <script>
    function setName()
    {
        document.getElementById("v1").style.display ="block";
        document.getElementById("v2").style.display ="block";
        document.getElementById("v3").style.display ="block";
        
        //document.getElementById('v11').parentNode.innerHTML += "10 ";
        //document.getElementById('v12').parentNode.innerHTML += "11 ";
        //document.getElementById('v13').parentNode.innerHTML += "12 ";
    document.getElementById('v11').innerHTML = "10 ";
    document.getElementById('v12').innerHTML = "11 ";
    document.getElementById('v13').innerHTML = "12 ";
    
    }
    </script>
</body>
</html>

@Пифагор · 17.05.2019, 00:11

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

display ="block"

Проблема из-за отображения итпута

@inquisitor · 17.05.2019, 00:41 **[ТС]**

Сообщение от Пифагор

Проблема из-за отображения итпута

а почему width=0 не работает так само,как дисплеу ноне?

@amr-now · 17.05.2019, 05:51

inquisitor, вот конечный Ваш скрипт с поправками:

PHP/HTML
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
33
34
35
<html>
<head>
    <meta charset="utf-8">
    <style> /* Стиль лучше определять в <head>, чем в <body> */
        .radio {
            display: none;
        }
    </style>
</head>
<body>
    <!-- <label> удобнее, чем <span> -->
    <p><input name="dzen" type="radio" class="radio" id="v1" value="nedzen"><label for="v1" id="v11"></label></p>
    <p><input name="dzen" type="radio" class="radio" id="v2" value="dzen"><label for="v2" id="v12"></label></p>
    <p><input name="dzen" type="radio" class="radio" id="v3" value="pdzen"><label for="v3" id="v13"></label></p>
    <p><button id="btn">Попробовать ещё</button></p>
 
    <script>
        // Обработчик события лучше вешать в скрипте, а не в атрибуте элемента
        document.getElementById("btn").onclick = setName;
 
        function setName() {
            document.getElementById("v1").style.display = "inline"; 
            document.getElementById("v2").style.display = "inline";
            document.getElementById("v3").style.display = "inline";
 
            //document.getElementById('v11').parentNode.innerHTML += "10 ";
            //document.getElementById('v12').parentNode.innerHTML += "11 ";
            //document.getElementById('v13').parentNode.innerHTML += "12 ";
            document.getElementById('v11').innerText = "10 ";
            document.getElementById('v12').innerText = "11 ";
            document.getElementById('v13').innerText = "12 ";
        }
    </script>
</body>
</html>

@inquisitor · 17.05.2019, 06:10 **[ТС]**

Сообщение от amr-now

inquisitor, вот конечный Ваш скрипт с поправками:

Вы показали мне новый способ записи.Спасибо в том числе и обработку клика.

Новые блоги и статьи Все статьи Все блоги /
Использование 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/

Как подписать радиокнопку?

Решение

Решение

Решение

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	16.05.2019, 07:01 [ТС]
	0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	16.05.2019, 20:13
	inquisitor, прошу пояснить, надписи для радиокнопок одноразово должны проставиться или именно нужно постоянно стирать предыдущую надпись возле радиокнопки и ставить другую надпись? От этого зависит, как писать скрипт. Добавлено через 2 минуты ---------- `style="display:none"` полностью скрывает без пустого места. 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	16.05.2019, 21:58
	Пифагор, с таким же успехом и удобнее использовать изначально присутствующую метку <label> 1