Смена текста после выбора радиокнопки

@Boris272 · Регистрация: 16.12.2018

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

Всем привет. Есть радиокнопка. При выборе ее, нужно изменить соседний span с текстом. С Js немного чайник. Помогите пожалуйста разобраться...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div class="radio-label">
                            <input type="radio" name="days1" value="400.00" id="fdays2">
                            <label for="fdays2" class="freest">4 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="280.00" id="twdays2">
                            <label for="twdays2" class="freest">12 days</label>
                        </div>
<div class="col type_body_col">
                        <span>$510</span>
                        <span>$400</span>
                    </div>

При нажатии на 1 день, нужно чтобы менял цвет "$510"

@amr-now · 18.02.2019, 09:51

Здравствуйте.
C цветами могут быть два варианта с подвохом.

Первый вариант, когда Вы не устанавливали стиль в атрибутах элемента:

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
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        span{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="radio-label">
        <input type="radio" name="days1" value="400.00" id="fdays2">
        <label for="fdays2" class="freest">4 days</label>
    </div>
    <div class="radio-label">
        <input type="radio" name="days1" value="280.00" id="twdays2">
        <label for="twdays2" class="freest">12 days</label>
    </div>
    <div class="col type_body_col">
        <span>$510</span>
        <span>$400</span>
    </div>
    <script>
        var radios = document.getElementsByName("days1"),
            blocks = document.querySelector(".col.type_body_col").children,
            prevId = -1;
        for (var i = 0; i < radios.length; i++) {
            radios[i].index = i;
            radios[i].onclick = clickHandler;
        }
 
        function clickHandler(e) {
            var id = e.target.index;
            blocks[id].style.color = "red";
            if (prevId > -1 && prevId !== id) {
                blocks[prevId].style.color = "";
            }
            prevId = id;
        }
    </script>
</body>
</html>

Второй вариант, когда в атрибутах элемента уже присутствовал стиль.
Тут придется раскорячиться с классами:

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
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .red {
            color:red !important;
        }
    </style>
</head>
<body>
    <div class="radio-label">
        <input type="radio" name="days1" value="400.00" id="fdays2">
        <label for="fdays2" class="freest">4 days</label>
    </div>
    <div class="radio-label">
        <input type="radio" name="days1" value="280.00" id="twdays2">
        <label for="twdays2" class="freest">12 days</label>
    </div>
    <div class="col type_body_col">
        <span style="color:blue;">$510</span>
        <span style="color:blue;">$400</span>
    </div>
    <script>
        var radios = document.getElementsByName("days1"),
            blocks = document.querySelector(".col.type_body_col").children,
            prevId = -1;
        for (var i = 0; i < radios.length; i++) {
            radios[i].index = i;
            radios[i].onclick = clickHandler;
        }
 
        function clickHandler(e) {
            var id = e.target.index;
            blocks[id].classList.add("red");
            if (prevId > -1 && prevId !== id) {
                blocks[prevId].classList.remove("red");
            }
            prevId = id;
        }
    </script>
</body>
</html>

@Boris272 · 18.02.2019, 11:57 **[ТС]**

Как сделать переключение цвета, если добавить еще такие-же блоки?

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
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        span{
            color:blue;
        }
    </style>
</head>
<body>
<div>
    <div class="radio-label">
        <input type="radio" name="days1" value="400.00" id="fdays2">
        <label for="fdays2" class="freest">4 days</label>
    </div>
    <div class="radio-label">
        <input type="radio" name="days1" value="280.00" id="twdays2">
        <label for="twdays2" class="freest">12 days</label>
    </div>
    <div class="col type_body_col">
        <span>$510</span>
        <span>$400</span>
    </div>
<div>
<div>
    <div class="radio-label">
        <input type="radio" name="days1" value="400.00" id="fdays2">
        <label for="fdays2" class="freest">4 days</label>
    </div>
    <div class="radio-label">
        <input type="radio" name="days1" value="280.00" id="twdays2">
        <label for="twdays2" class="freest">12 days</label>
    </div>
    <div class="col type_body_col">
        <span>$510</span>
        <span>$400</span>
    </div>
<div>
</body>
</html>

@amr-now · 18.02.2019, 14:07

1. Разные группы радиокнопок не могут иметь одинаковое имя. Иначе будет сквозное перемещение выбранной точки.
2. Если взаимное положение радиокнопок и чисел известно, то от первой радиокнопки доберемся до родительского <div>,
потом выйдем на класс группы чисел.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        span{
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <div class="radio-label">
            <input type="radio" name="days1" value="400.00" id="fdays2">
            <label for="fdays2" class="freest">4 days</label>
        </div>
        <div class="radio-label">
            <input type="radio" name="days1" value="280.00" id="twdays2">
            <label for="twdays2" class="freest">12 days</label>
        </div>
        <div class="col type_body_col">
            <span>$510</span>
            <span>$400</span>
        </div>
    </div>
    <div>
        <div class="radio-label">
            <input type="radio" name="days2" value="400.00" id="fdays2">
            <label for="fdays2" class="freest">4 days</label>
        </div>
        <div class="radio-label">
            <input type="radio" name="days2" value="280.00" id="twdays2">
            <label for="twdays2" class="freest">12 days</label>
        </div>
        <div class="col type_body_col">
            <span>$510</span>
            <span>$400</span>
        </div>
    </div>
    <script>
        for (var i = 1; i <= 2; i++) {
            var radios = document.getElementsByName("days" + i),
                blocks = radios[0].parentElement.parentElement.querySelector(".col.type_body_col").children;
 
            initSelector(radios, blocks);
        }
 
        function initSelector(radios, blocks) {
            var prevId = -1;
            for (var i = 0; i < radios.length; i++) {
                radios[i].index = i;
                radios[i].onclick = clickHandler;
            }
 
            function clickHandler(e) {
                var id = e.target.index;
                blocks[id].style.color = "red";
                if (prevId > -1 && prevId !== id) {
                    blocks[prevId].style.color = "";
                }
                prevId = id;
            }
        }
    </script>
</body>
</html>

@Boris272 · 18.02.2019, 14:20 **[ТС]**

Ошибку понял, только теперь перестало работать совсем

@amr-now · 18.02.2019, 15:19

Boris272, как от радиокнопки до своего списка чисел добираемся, понятно?

JavaScript
1
radios[0].parentElement.parentElement.querySelector(".col.type_body_col").children;

Если взаимное положение другое, то можно изменить.

@Boris272 · 18.02.2019, 16:55 **[ТС]**

Не очень

@amr-now · 18.02.2019, 19:35

Boris272, тогда изучайте http://learn.javascript.ru
Раздел навигации по DOM.

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Boris272 0 / 0 / 0 Регистрация: 16.12.2018 Сообщений: 15
	18.02.2019, 14:20 [ТС]
	Ошибку понял, только теперь перестало работать совсем 0

@Boris272 0 / 0 / 0 Регистрация: 16.12.2018 Сообщений: 15
	18.02.2019, 16:55 [ТС]
	Не очень 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	18.02.2019, 19:35
	Boris272, тогда изучайте http://learn.javascript.ru Раздел навигации по DOM. 1