Javascript-форум - вывод значения value в конкретный блок

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - вывод значения value в конкретный блок (https://javascript.ru/forum/dom-window/67843-vyvod-znacheniya-value-v-konkretnyjj-blok.html)

вывод значения value в конкретный блок

Помогите !!! я новичок в jQuery есть некий код в процессе которого по нажатию на checkbox должно заносится значение этого checkbox в конкретный div но как-то постоянно выводит ошибку
Вот код:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>JavaScript калькулятор расчета стоимости для сайта</title>    
	<meta name="description" content="В эпоху широчайшего развития бизнеса при помощи сети Интернет актуальным является создание JavaScript калькулятора для расчета стоимости товаров или услуг компании. В этой статье я распишу создание простейшего калькулятора для сайта по продаже линолеума." />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="css/Calculator.css" />
    <script type="text/javascript" src="js/jquery-3-1-1.js"></script>
	<script type="text/javascript" src="js/Calculator.js"></script>
</head>
<body>
	<div id="wraper">
		<h1 id="calculator">Калькулятор</h1>
			<form>
				<select id="mobSel"><!--По этому id будет срабатывать виджет-->
					<option value="dors">Выберите из списка</option>
					<option value="dors1">Металлические двери ( одностворчатые 2100х900)</option>
					<option value="dors2">Металлические двери ( двустворчатые 2000х1200)</option>
					<option value="dors3">Противопожарные двери</option>
					<option value="dors4">Технические двери</option>
					<option value="dors5">Ставни</option>
					<option value="dors6">Ворота прямые</option>
					<option value="dors7">Ворота арочные</option>
					<option value="dors8">Антивандальные решетки на кондиционер</option>
					<option value="dors9">Пластиковые окна ПВХ</option>
				</select>
			</form>
			<br/ ><br/ >
		<div id="blok1"></div>
		<div id="blok2"></div>
		<div id="other"></div>
		<br/ ><br/ >
		<div id="price"></div>
	</div>
</body>

файл js/Calculator.js

jQuery(document).ready(function() {
jQuery( "#mobSel" ).on('change', function () {
var newSelect = jQuery( this ).val();
var checkboxes = jQuery("input[type='checkbox']");
for(i=0; i<checkbox.length; i++) {
var x = checkbox[i].val();
jQuery('#price').html(x);};
});
});

В данном случае в <div id="price"></div> должно выводится значение value , а в реальности выдает ошибку:
Uncaught ReferenceError: checkbox is not defined
при нажатии на любой checkbox.
Помогите плиз

Sprutenok000,
в вашем html коде нет ни одного input[type='checkbox']

сори не полностью js написал

jQuery(document).ready(function() {
jQuery( "#mobSel" ).on('change', function () {
var newSelect = jQuery( this ).val();
if(newSelect == "dors1") {
		jQuery('div #blok1').append('<div id="Door_standard" style="border: 1px solid #666; margin: 0 50px 0 50px;"><input type="checkbox" name="stan1" value="Дверь стандартная открывается наружу петли с лева">Дверь стандартная открывается наружу петли с лева<br /><input type="checkbox" name="stan2" value="Дверь стандартная открывается наружу петли с права">Дверь стандартная открывается наружу петли с права<br /><div style="float: right; margin: -40px 0 0 0;"><input type="checkbox" name="stan3" value="Дверь стандартная открывается во внутрь помещения петли с лева">Дверь стандартная открывается во внутрь помещения петли с лева<br /><input type="checkbox" name="stan4" value="stan4">Дверь стандартная открывается во внутрь помещения петли с права</div></div>')};
jQuery( "#Door_standard" ).on('change', function () {
var checkboxes = jQuery("input[type='checkbox']");
for(i=0; i<checkbox.length; i++) {
var x = checkbox[i].val();
jQuery('#price').html(x);};
});
});

Sprutenok000,
checkboxes это обьект jQuery, в котором в числовых ключах(индексах) находятся элементы(если таковые есть), в данном случае input. у input нет никакого val(), а есть value.

var x = checkbox[i].value;

или

var x = checkbox.eq(i).val();

я понял спасибо за разснение
но ошибку выдает вот в этой строке

for(i=0; i<checkbox.length; i++) {

Sprutenok000,
вы 7 строку пост№3 исправили?

да но не 7ю а 9ю

Sprutenok000,
то есть отмеченное красным, вы исправлять не стали?

вот ищу как его исправить пытаюсь найти более обширный ответ к тому что вы мне ответили
P.S.
Буду благодарен если дадите ссылку на более обширный ответ на исправление этой ошибки тобишь с примерами чтоб можно было понять что именно нетак

Sprutenok000,
у вас в строке 7 var checkboxes
а в строке 8 checkbox -- разницу видите?

Огромное спасибо!!!
все заработало
буду учится дальше калькулятор делать

Sprutenok000,

jQuery( "#Door_standard" ).on('change', function () {
var checkboxes = jQuery("input[type='checkbox']");
for(var i=0; i<checkboxes.length; i++) {  //что делает этот код одному вам известно
var x = checkboxes[i].value;
jQuery('#price').html(x)};
});

Спасибо что носом ткнули в то что сам пишу и не вижу
а то 2-е сутки яндекс тыкаю и не могу понять откуда такие кривые руки а оказалось не руки кривые а просто слепой)))

А подскажи почему код выводит только последний value по идее там 4 checkbox"а и они должны переключаться поочериди в зависимости от выбранной галочки

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>JavaScript калькулятор расчета стоимости для сайта</title>    
	<meta name="description" content="В эпоху широчайшего развития бизнеса при помощи сети Интернет актуальным является создание JavaScript калькулятора для расчета стоимости товаров или услуг компании. В этой статье я распишу создание простейшего калькулятора для сайта по продаже линолеума." />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="css/Calculator.css" />
    <script type="text/javascript" src="js/jquery-3-1-1.js"></script>
	<script type="text/javascript" src="js/Calculator.js"></script>
</head>
<body>
	<div id="wraper">
		<h1 id="calculator">Калькулятор</h1>
			<form>
				<select id="mobSel"><!--По этому id будет срабатывать виджет-->
					<option value="dors">Выберите из списка</option>
					<option value="dors1">Металлические двери ( одностворчатые 2100х900)</option>
					<option value="dors2">Металлические двери ( двустворчатые 2000х1200)</option>
					<option value="dors3">Противопожарные двери</option>
					<option value="dors4">Технические двери</option>
					<option value="dors5">Ставни</option>
					<option value="dors6">Ворота прямые</option>
					<option value="dors7">Ворота арочные</option>
					<option value="dors8">Антивандальные решетки на кондиционер</option>
					<option value="dors9">Пластиковые окна ПВХ</option>
				</select>
			</form>
			<br/ ><br/ >
		<div id="blok1"></div>
		<div id="blok2"></div>
		<div id="other"></div>
		<br/ ><br/ >
		<div id="price"></div>
	</div>

jQuery(document).ready(function() {
	jQuery( "#mobSel" ).on('change', function () {
	var newSelect = jQuery( this ).val();
	if(newSelect == "dors1") {
	jQuery('div #blok1').append('<div id="Door_standard" style="border: 1px solid #666; margin: 0 50px 0 50px;"><input type="checkbox" name="stan1" value="Дверь стандартная открывается наружу петли с лева">Дверь стандартная открывается наружу петли с лева<br /><input type="checkbox" name="stan2" value="Дверь стандартная открывается наружу петли с права">Дверь стандартная открывается наружу петли с права<br /><div style="float: right; margin: -40px 0 0 0;"><input type="checkbox" name="stan3" value="Дверь стандартная открывается во внутрь помещения петли с лева">Дверь стандартная открывается во внутрь помещения петли с лева<br /><input type="checkbox" name="stan4" value="stan4">Дверь стандартная открывается во внутрь помещения петли с права</div></div>')};
	jQuery( "#Door_standard" ).on('change', function () {
	var checkbox = jQuery("input[type='checkbox']");
	for(i=0; i<checkbox {
	var x = checkbox[i].val();
	jQuery('#price').html(x);};
	});
	});

тут по моей задумке должно было по клику на checkbox передаваться значение в <div id="price"></div> просто выводится значения и соответственно меняться в зависимости от того что выбирать без перезагрузки страницы((( я прям в шоке 3 дня мучился а в итоге бестолку

Sprutenok000,

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>JavaScript калькулятор расчета стоимости для сайта</title>
  <meta name="description" content="В эпоху широчайшего развития бизнеса при помощи сети Интернет актуальным является создание JavaScript калькулятора для расчета стоимости товаров или услуг компании. В этой статье я распишу создание простейшего калькулятора для сайта по продаже линолеума." />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="css/Calculator.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script>
     jQuery(document).ready(function() {
         jQuery("#mobSel").on('change', function() {
             var newSelect = jQuery(this).val();
             if (newSelect == "dors1") {
                 jQuery('div #blok1').append('<div id="Door_standard" style="border: 1px solid #666; margin: 0 50px 0 50px;"><input type="checkbox" name="stan1" value="Дверь стандартная открывается наружу петли с лева">Дверь стандартная открывается наружу петли с лева<br /><input type="checkbox" name="stan2" value="Дверь стандартная открывается наружу петли с права">Дверь стандартная открывается наружу петли с права<br /><div style="float: right; margin: -40px 0 0 0;"><input type="checkbox" name="stan3" value="Дверь стандартная открывается во внутрь помещения петли с лева">Дверь стандартная открывается во внутрь помещения петли с лева<br /><input type="checkbox" name="stan4" value="stan4">Дверь стандартная открывается во внутрь помещения петли с права</div></div>')
             };
             jQuery("#Door_standard").on('change', function() {
                 var checkbox = jQuery("input:checked", this);
                 var x = $.map(checkbox, function(input) {
                     return input.value
                 });
                 jQuery('#price').html(x.join("<br>"));
             });
         });
     });
 </script>
</head>
<body>
  <div id="wraper">
    <h1 id="calculator">Калькулятор</h1>
      <form>
        <select id="mobSel"><!--По этому id будет срабатывать виджет-->
          <option value="dors">Выберите из списка</option>
          <option value="dors1">Металлические двери ( одностворчатые 2100х900)</option>
          <option value="dors2">Металлические двери ( двустворчатые 2000х1200)</option>
          <option value="dors3">Противопожарные двери</option>
          <option value="dors4">Технические двери</option>
          <option value="dors5">Ставни</option>
          <option value="dors6">Ворота прямые</option>
          <option value="dors7">Ворота арочные</option>
          <option value="dors8">Антивандальные решетки на кондиционер</option>
          <option value="dors9">Пластиковые окна ПВХ</option>
        </select>
      </form>
      <br/ ><br/ >
    <div id="blok1"></div>
    <div id="blok2"></div>
    <div id="other"></div>
    <br/ ><br/ >
    <div id="price"></div>
  </div>

</body>
</html>

Спасибо большое)))

а подскажи как его теперь остановить а то он при каждом нажатии выкидывает еще одно поле в DIV

HTML не изменился а вот скрипт немного добавился

jQuery(document).ready(function() {
jQuery( "#mobSel" ).on('change', function () {
var newSelect = jQuery( this ).val();
	if(newSelect == "dors1") {
		jQuery('div #blok1').append('<div id="Door_standard" style="border: 1px solid #666; margin: 0 50px 0 50px;"><input type="checkbox" name="stan1" value="Дверь стандартная открывается наружу петли с лева">Дверь стандартная открывается наружу петли с лева<br /><input type="checkbox" name="stan2" value="Дверь стандартная открывается наружу петли с права">Дверь стандартная открывается наружу петли с права<br /><input type="checkbox" name="stan3" value="Дверь стандартная открывается во внутрь помещения петли с лева">Дверь стандартная открывается во внутрь помещения петли с лева<br /><input type="checkbox" name="stan4" value="Дверь стандартная открывается во внутрь помещения петли с права">Дверь стандартная открывается во внутрь помещения петли с права</div>')
		};
		jQuery( "#Door_standard" ).on('change', function () {
			var checkbox = jQuery("input:checked", this);
			var x = $.map(checkbox, function(input) {
			return input.value
			});
		jQuery('#price').html(x.join("<br>")).append('  ' + the_price_of_the_frame + ' руб<br />'); 
		if(x == x) {
			jQuery('div #blok2').append('<div id="TheDesignOfTheDoors" style="border: 1px solid #666; margin: 0 50px 0 50px;"><input type="checkbox" name="stan1" value="Дверь обычная">Дверь обычная<br /><input type="checkbox" name="stan2" value="Дверь с терморазрывом">Дверь с терморазрывом<br /><input type="checkbox" name="stan3" value="Дверь с двойным контуром уплотнения">Дверь с двойным контуром уплотнения<br /><input type="checkbox" name="stan4" value="Дверь с тройным контуром уплотнения">Дверь с тройным контуром уплотнения<br /><input type="checkbox" name="stan4" value="Противопожарная дверь">Противопожарная дверь</div>')
		};
		jQuery( "#TheDesignOfTheDoors" ).on('change', function () {
			var checkbox2 = jQuery("input:checked", this);
			var x2 = $.map(checkbox2, function(input) {
			return input.value
			});
		jQuery('#price').append(x2.join("<br>") + '  ' + the_price_of_the_frame + ' руб');

Цитата:

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

if(x == x)

это что?

суть этой записи такова что при выборе с тех инпутов кабы цена неменяется а все эти варианты ведут к следущим инпутам вот я и подумал что может это должно выглядеть так что если переменная х=х то должно выводить вот эти вторые инпуты

Sprutenok000,
не подскажу, всё что мог выше.

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