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

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

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

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

HTML5

<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

$("#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

<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

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

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

 <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

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

$(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)

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

Решение

Решение

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