Передать значение value чекнутой радиокнопки и вывести его на страницу

@dimoncheg · Регистрация: 18.10.2012

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

Добрый день. Есть две радиокнопки:

HTML5
1
2
3
4
5
6
7
8
<div class="radio">
                    <div class="unit" id="unit_767886">
                    <input type="radio" value="767886" data-id="390033" id="element_390033_767886" name="field390033" onclick='unhide()'>&nbsp;<label for="element_390033_767886">Дети есть</label></div>
 
 
                    <div class="unit" id="unit_767887">
                    <input type="radio" value="767887" data-id="390033" id="element_390033_767887" name="field390033" onclick='unhide()'>&nbsp;<label for="element_390033_767887">Детей нет</label></div>
                    </div></div>

Нужно чтобы они были не checked изначально и чтобы когда какую-нибудь чекнули, то значение её value вывелось в какой-то блок. Делаю так:

HTML5
1
<i id="end_children"><i id="end_no_children"></i>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#element_390033_767886").click(function () {
this.setAttribute('checked', 'checked');
});
 
$("#element_390033_767887").click(function () {
this.setAttribute('checked', 'checked');
});
 
 
if (document.getElementById('element_390033_767886').checked == true){
   var children = "Едут";
   document.getElementById('end_children').innerHTML = children;
} 
 
if (document.getElementById('element_390033_767887').checked == true){
    var no_children = "Не едут";
   document.getElementById('end_children').innerHTML = no_children;
}

Но ничего не выходит. В чем проблемес? :С

@j2FunOnly · 26.09.2016, 11:05

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

Но ничего не выходит.

http://learn.javascript.ru/devtools

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="children">
  <div class="unit" id="unit_767886">
    <input type="radio" value="767886" data-id="390033" id="element_390033_767886" name="field390033" onclick='unhide()'>
    &nbsp;
    <label for="element_390033_767886">Дети есть</label>
  </div>
  <div class="unit" id="unit_767887">
    <input type="radio" value="767887" data-id="390033" id="element_390033_767887" name="field390033" onclick='unhide()'>
    &nbsp;
    <label for="element_390033_767887">Детей нет</label></div>
  </div>
  <div>
    <i id="end_children"></i>
    <!-- <i id="end_no_children"></i> -->
  </div>
</div>

JavaScript
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
var hasChildren = function () {
  // Браузер вполне способен сам включить нужный radio input
  // $("#element_390033_767886").click(function () {
  //   this.setAttribute('checked', 'checked');
  // });
  //
  // $("#element_390033_767887").click(function () {
  //   this.setAttribute('checked', 'checked');
  // });
 
  var children = false;
  // if (document.getElementById('element_390033_767886').checked == true){
  //   var children = "Едут";
  //   document.getElementById('end_children').innerHTML = children;
  // }
 
  // if (document.getElementById('element_390033_767887').checked == true){
  //   var no_children = "Не едут";
  //   document.getElementById('end_children').innerHTML = no_children;
  // }
 
  // Достаточно проверить одну кнопку радио из id которой ясно что выбрано "Дети есть"
  children = $('#element_390033_767886').prop('checked');
  console.log(children);
  // и вывести значение value выбраной кнопки
  $('#end_children').text((children ? 'Дети едут' : 'Дети не едут') + ' ' + this.value);
}
 
// А это что за функция у вас? Напишу заглушку.
var unhide = function () {
  console.log('Magic unhide function');
}
 
$(function () {
  var hasChildrenRadioBtns = $('.children input:radio');
  hasChildrenRadioBtns.prop('checked', false);
  hasChildrenRadioBtns.on('change', hasChildren);
});

@dimoncheg · 26.09.2016, 11:54 **[ТС]**

j2FunOnly, спасибо огромное, работает, мое уважение) А как сделать, чтобы такое работало не на "да" / "нет", а на любое число радиокнопок? Я пытаюсь, но я туп.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var hasSealine = function () {
  
  // Достаточно проверить одну кнопку радио из id которой ясно что выбрано "Дети есть"
  sealine = $('#sealine').prop('checked');
  console.log(sealine);
  // и вывести значение value выбраной кнопки
  $('#end_sealine').text((sealine));
}
 
 
$(function () {
  var hasSealineRadioBtns = $('#sealine input:radio');
  hasSealineRadioBtns.prop('checked', false);
  hasSealineRadioBtns.on('change', hasSealine);
});

HTML5
1
<tr><td>Линия от моря:</td><td id="end_sealine"></td></tr>

HTML5
1
2
3
4
5
6
7
8
 <div id="sealine">
                    <h6>Линия отеля от моря</h6>
                    <div class="radio">
                    <div class="unit" id="unit_767886"><input type="radio" value="Первая линия" name="sea_line" id="sea_line1">&nbsp;<label for="element_390033_767886">Первая линия</label></div>
                    <div class="unit" id="unit_767887"><input type="radio" value="Вторая линия" name="sea_line" id="sea_line2">&nbsp;<label for="element_390033_767887">Вторая линия</label></div>
                    <div class="unit" id="unit_767888"><input type="radio" value="Третья линия" name="sea_line" id="sea_line3">&nbsp;<label for="element_390033_767888">Третья линия</label></div>
                    </div>
                    </div>

@j2FunOnly · 26.09.2016, 13:40

dimoncheg, ну смотрите:
Можно повесить на событие 'click' (ведь почти всегда надо клинуть мышкой, чтобы выбрать нужную из кнопок радио ) и получить доступ к значению атрибута 'value' через this.
Если обработчик будет на событие 'change', то надо проверять атрибут 'checked' элемента и, если этот элемент выбран, то выводить значение 'value'.

JavaScript
1
2
3
4
5
6
7
var sealineClicked = function () {
  $('#end_sealine').text(this.value);
}
 
var sealineChanged = function () {
  if(this.checked) $('#end_sealine').text(this.value);
}

Добавлено через 9 минут
Можно вообще сделать так, чтобы было одна функция на все радио кнопки. Трудно гадать не видя формы.
Например если у вас все группы кнопок в родительском div с определнным id, а все поля куда вы выводите значение 'value' этой кнопки имеют такой же id, начинющийся с 'end_', то можно сделать так:

JavaScript
1
2
3
4
5
6
7
8
$(function () {
  $('input:radio').on('change', function () {
    if(!this.checked) return;
    
    var parentId = $(this).closest('div').prop('id');
    $('#end_' + parentId).text(this.value);
  });
});

@dimoncheg · 26.09.2016, 16:48 **[ТС]**

j2FunOnly, сделал одну функцию на радиокнопки, здорово вышло, спасибо большое еще раз, я просто только вкатываюсь в JS)

Новые блоги и статьи Все статьи Все блоги /
моя боль 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/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

Передать значение value чекнутой радиокнопки и вывести его на страницу

Решение

Решение

@dimoncheg 10 / 10 / 4 Регистрация: 18.10.2012 Сообщений: 224
	26.09.2016, 16:48 [ТС]
	j2FunOnly, сделал одну функцию на радиокнопки, здорово вышло, спасибо большое еще раз, я просто только вкатываюсь в JS) 0