Вывод checkbox-ов в отдельный div(output )

@maxrom84 · Регистрация: 21.04.2015

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

Скрипт должен при выборе чекбоксов отображать их содержимое(что идет после чекбоксов, те label-ов) после в отдельный div(на текущей стадии разобрался только с выводом в output).
Ниже указанный код выводит следующий результат в output

HTML5
1
2
3
4
n=1twocont=undefined
n=2twocont=undefined
n=3twocont=undefined
n=4twocont=undefined

Сам код. Скорее всего ошибка либо в 23(innerHtml или .html но как их применить) строке, либо в 29.

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>выбор</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<form name="Sum">
  <input type="checkbox" value="1" id="raz"/><label for="raz" >1111</label>
  <input type="checkbox" value="2" id="raz"/><label for="raz" >2222</label>
  <input type="checkbox" value="3" id="raz"/><label for="raz" >3333</label>
  <input type="checkbox" value="4" id="raz"/><label for="raz" >4444</label>
  <br />
  <output id="rezultat2">rezultat</output>
</form>
 
<script>
var s = document.forms.Sum;
s.onchange = function()
{      // начало работы функции сложения
  var n = s.querySelectorAll('[type="checkbox"]');
    var twocont = s.querySelectorAll('[label]');
      itog = '<br />';
            for(var j=0; j<n.length; j++)
                    {
                        if (n[j].checked)
                            {
                           itog = itog+ 'n='+n[j].value+'twocont='+twocont[j]+'<br />' ;
                            }
                            document.getElementById('rezultat2').innerHTML = itog;
                    }
}
</script>
</body>
</html>

@AmateR62 · 28.12.2015, 21:09

Непонятно немного, что вы хотите сделать, у вас суммироваться поля должны когда чекбоксы отмечены? А так...

HTML5
1
2
3
4
<input type="checkbox" value="1" id="raz"/><label for="raz" >1111</label>
  <input type="checkbox" value="2" id="raz"/><label for="raz" >2222</label>
  <input type="checkbox" value="3" id="raz"/><label for="raz" >3333</label>
  <input type="checkbox" value="4" id="raz"/><label for="raz" >4444</label>

id не может быть одинаковыми, поменяйте на class или id меняйте

Если просто вывести label то можно вот так:

JavaScript
1
2
3
4
5
$(document).ready(function() {
  $('.raz').click(function() {
    $("#rezultat2").html($(this).next("label").text());
  });
})

Но id заменить на класс.

http://codepen.io/anon/pen/QyGbPe?editors=101

@maxrom84 · 28.12.2015, 21:21 **[ТС]**

Спасибо за ответ. Мне нужно чтобы к примеру при выборе первых двух чекбоксов в

HTML5
1
<output id="rezultat2">rezultat</output>

помещалось

HTML5
1
2
<label for="raz" >1111</label>
<label for="raz" >2222</label>

вот как это реализовано на headhunter, чего я хочу добиться. Т.е. мне нужно чтобы был список чекбоксов и при выборе каждого он отображался в другом div/

Вывод checkbox-ов в отдельный div(output )

@AmateR62 · 28.12.2015, 22:31

Так пойдет?
http://codepen.io/anon/pen/QyGbPe

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
  $('.raz').click(function() {
    itog = '';
    $("#rezultat2").html('');
    var set = $("input[type=checkbox]").get(); 
     $(set).each(function() {
       if ($(this).is(':checked')) itog = itog + $(this).next('label').html()+'<br />';;
     });
     $('#rezultat2').html(itog);
  });
})

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

Вывод checkbox-ов в отдельный div(output )

Решение