Подскажите с chekbox и выводом чисел

@Дмитрий Дмитрий · Регистрация: 17.09.2016

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

Цель такая, ставим галочку на chekbox активируем поле где будут выводиться числа 2, 3, 4, которые выводяться при условии ввода чисел в другом поле. Сейчас все работает при каждом нажатии на chekbox, а нужно динамическое изменение т.е. нажали на chekbox активировали поле id="wb_zk" в котором и будут выводиться числа 2, 3, 4. При изменении чисел в поле id="box" в поле id="wb_zk" сразу появляется необходимое число.

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
<!doctype html>
<html>
<head>
</head>
<body>
<input type="number" id="box" style="position:absolute;left:346px;top:130px;width:130px;height:26px;line-height:26px;z-index:0;" name="editbox1" value="">
<div id="wb_zk" style="position:absolute;left:592px;top:145px;width:50px;height:21px;z-index:1;text-align:left;" name="res">
<span style="color:#000000;font-family:Calibri;font-size:17px;">Число</span></div>
<input type="checkbox" id="check" name="ck" value="on" style="position:absolute;left:554px;top:143px;z-index:2;" onchange = 'showOrHide("check");'>
<script>
var a = document.getElementById('box');
var b = document.getElementById('wb_zk');
var m = [2, 3, 4]
var c = document.getElementById('check');
 
function showOrHide(check) {
if (c.checked) b.style.display = "block";
    else b.style.display = "none";
  }
 
c.onclick = function firstCalc() {
  if (a.value >= 0.4 && a.value <= 1.5) 
    b.innerHTML = m[0];
  if (a.value >= 1.51 && a.value <= 2) 
    b.innerHTML = m[1]; 
  if (a.value >= 2.01 && a.value <= 3) 
    b.innerHTML = m[2]; 
}
</script>
</body>
</html>

@codding_hanter · 07.10.2016, 17:20

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

@Дмитрий Дмитрий · 07.10.2016, 19:24 **[ТС]**

Ребят, вы спецы дай бог каждому, ну скачайте код, там все понятно, все косяки на глазах. Что именно не понятно?

@codding_hanter · 07.10.2016, 20:15

Не понятно задание,обясните проще.

@Resume · 07.10.2016, 20:36

Грамотно сформулированный вопрос - половина успеха.

@mrtoxas · 07.10.2016, 22:53

CSS
1
2
3
#wb_zk{
  display:none;
}

HTML5
1
2
3
4
5
<input type="number" id="number" name="editbox1" value="">
<input type="checkbox" id="check" name="ck" value="on">  
<div id="wb_zk" name="res"> 
  <span>Число</span> 
</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
var numberInp = document.getElementById('number'),
     resField = document.getElementById('wb_zk'),
     ckeckBox = document.getElementById('check'),
     resFieldFirstVal = resField.innerHTML,
     counts = [2, 3, 4];
 
ckeckBox.addEventListener('change', showHideRes.bind());
ckeckBox.addEventListener('change', firstCalc.bind());
 
function showHideRes(elem) {
  if (ckeckBox.checked){
    resField.style.display = 'block';
  } else{
    resField.innerHTML = resFieldFirstVal;
    resField.style.display = 'none';
  }
}
 
function firstCalc() {
  if (numberInp.value >= 0.4 && numberInp.value <= 1.5) {
    resField.innerHTML = counts[0];
  } else if (numberInp.value >= 1.51 && numberInp.value <= 2) {
    resField.innerHTML = counts[1];
  } else if (numberInp.value >= 2.01 && numberInp.value <= 3) {
    resField.innerHTML = counts[2];
  }
}

@Дмитрий Дмитрий · 08.10.2016, 09:46 **[ТС]**

Честно говоря ни чего не поменялось, как работало так и работает.
Что нужно)))
1. В поле id="box" вводим число, например 1, chekbox не нажат (без галочки);
2. Нажимаем chekbox (ставим галочку);
3. В поле id="wb_zk", согласно коду:

JavaScript
1
2
if (numberInp.value >= 0.4 && numberInp.value <= 1.5) {
    resField.innerHTML = counts[0];

появляется число 2;
4. Если мы ввели в поле id="box" другое число, например 2, chekbox так и нажат (галочка стоит мы её не снимаем), то в поле
id="wb_zk", согласно коду:

JavaScript
1
2
else if (numberInp.value >= 1.51 && numberInp.value <= 2) {
    resField.innerHTML = counts[1];

появляется число 3, все изменения происходят при активном chekbox (в реальном времени так сказать);
5. Если мы сняли галочку с chekbox, поле id="wb_zk" становиться не активным, все значения в нём обнуляются.
Как то так, надеюсь все понятно объяснил

Добавлено через 9 минут
Получается мы привязали событие по выводу чисел 2, 3, 4 по нажатию ckeckBox.

JavaScript
1
ckeckBox.addEventListener('change', firstCalc.bind());

А нужно по изменению значения в поле id="box" т.е. поменяли число изменилось и число в поле id="wb_zk".

Добавлено через 38 минут
Поставил обработчик событий onkeyup="firstCalc()" в поле id="box" работает но с клавы, думаю дальше)))

Добавлено через 9 минут
Установил событие onmousedown="firstCalc();", работает с мышки, но есть одно но, начинает работать даже при не активном ckeckBox (галочки нет), только когда устанавливаем галочку начинает работать правильно.

Добавлено через 1 минуту

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
39
40
41
42
43
44
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Безымянная страница</title>
<meta name="generator" content="WYSIWYG Web Builder 11 - http://www.wysiwygwebbuilder.com">
<link href="index.css" rel="stylesheet">
</head>
<body>
<input type="number" id="box" style="position:absolute;left:346px;top:130px;width:130px;height:26px;line-height:26px;z-index:0;" name="editbox1" onkeyup="firstCalc();" onmousedown="firstCalc();" value="">
<div id="wb_zk" style="position:absolute;left:592px;top:145px;width:50px;height:21px;z-index:1;text-align:left;" name="res">
<span style="color:#000000;font-family:Calibri;font-size:17px;">Число</span></div>
<input type="checkbox" id="check" name="ck" value="on" style="position:absolute;left:554px;top:143px;z-index:2;" onchange = 'showOrHide("check");'>
<script>
var numberInp = document.getElementById('box'),
     resField = document.getElementById('wb_zk'),
     ckeckBox = document.getElementById('check'),
     resFieldFirstVal = resField.innerHTML,
     counts = [2, 3, 4];
 
ckeckBox.addEventListener('change', showHideRes.bind());
 
function showHideRes(elem) {
  if (ckeckBox.checked){
    resField.style.display = 'block';
  } else {
    resField.innerHTML = resFieldFirstVal;
    resField.style.display = 'none';
  }
}
 
function firstCalc() {
  if (numberInp.value >= 0.4 && numberInp.value <= 1.5) {
    resField.innerHTML = counts[0];
  } else if (numberInp.value >= 1.51 && numberInp.value <= 2) {
    resField.innerHTML = counts[1];
  } else if (numberInp.value >= 2.01 && numberInp.value <= 3) {
    resField.innerHTML = counts[2];
  }
}
 
</script>
</body>
</html>

Добавлено через 13 минут
В этом коде:

JavaScript
1
2
3
4
5
6
7
8
9
10
ckeckBox.addEventListener('change', showHideRes.bind());
 
function showHideRes(elem) {
  if (ckeckBox.checked){
    resField.style.display = 'block';
  } else {
    resField.innerHTML = resFieldFirstVal;
    resField.style.display = 'none';
  }
}

Мы поле id="wb_zk не блокируем, только прячем?
Наверное нужно через disabled ? Что бы блокировка поля снималась по установки галочки на chekbox.

@mrtoxas · 08.10.2016, 09:56

добавьте к моему коду

JavaScript
1
numberInp.addEventListener('input', firstCalc.bind());

И замените этот кусок

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function firstCalc() {
  if (ckeckBox.checked) {
    if (numberInp.value >= 0.4 && numberInp.value <= 1.5) {
      resField.innerHTML = counts[0];
    } else if (numberInp.value >= 1.51 && numberInp.value <= 2) {
      resField.innerHTML = counts[1];
    } else if (numberInp.value >= 2.01 && numberInp.value <= 3) {
      resField.innerHTML = counts[2];
    }
  }
}

@Дмитрий Дмитрий · 08.10.2016, 10:04 **[ТС]**

Нужно что то типо этого http://stepbystep.htmlbook.ru/?id=29
Чтобы поле блокировалась и разблокировалась по установке галочки или снятию

Добавлено через 2 минуты
Как то так но пока не выходит

JavaScript
1
2
3
4
5
function ckForm() {
    // Если поставлен флажок, снимаем блокирование поля wb_zk
    if (ckeckBox.checked) resField.disabled = 0 // В противном случае вновь блокируем поле wb_zk
    else resField.disabled = 1
   }

HTML5
1
<input type="checkbox" id="check" name="ck" value="on" style="position:absolute;left:554px;top:143px;z-index:2;" onClick="ckForm()">

Добавлено через 2 минуты
Весь исходник, все работает но по блокировке пока жо...а

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
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Безымянная страница</title>
<meta name="generator" content="WYSIWYG Web Builder 11 - http://www.wysiwygwebbuilder.com">
<link href="index.css" rel="stylesheet">
</head>
<body>
<input type="number" id="box" style="position:absolute;left:346px;top:130px;width:130px;height:26px;line-height:26px;z-index:0;" name="editbox1" onkeyup="firstCalc();" onmousedown="firstCalc();" value="">
<div id="wb_zk" style="position:absolute;left:592px;top:145px;width:50px;height:21px;z-index:1;text-align:left;" name="res">
<span style="color:#000000;font-family:Calibri;font-size:17px;">Число</span></div>
<input type="checkbox" id="check" name="ck" value="on" style="position:absolute;left:554px;top:143px;z-index:2;" onClick="ckForm()">
<script>
var numberInp = document.getElementById('box'),
     resField = document.getElementById('wb_zk'),
     ckeckBox = document.getElementById('check'),
     resFieldFirstVal = resField.innerHTML,
     counts = [2, 3, 4];
 function ckForm() {
    // Если поставлен флажок, снимаем блокирование кнопки
    if (ckeckBox.checked) resField.disabled = 0 // В противном случае вновь блокируем кнопку
    else resField.disabled = 1
   }
//ckeckBox.addEventListener('change', showHideRes.bind());
 
//function showHideRes(elem) {
  //if (ckeckBox.checked){
    //resField.style.display = 'block';
  //} else {
    //resField.innerHTML = resFieldFirstVal;
    //resField.style.display = 'none';
  //}
//}
 
function firstCalc() {
  if (numberInp.value >= 0.4 && numberInp.value <= 1.5) {
    resField.innerHTML = counts[0];
  } else if (numberInp.value >= 1.51 && numberInp.value <= 2) {
    resField.innerHTML = counts[1];
  } else if (numberInp.value >= 2.01 && numberInp.value <= 3) {
    resField.innerHTML = counts[2];
  }
}
 
</script>
</body>
</html>

@mrtoxas · 08.10.2016, 10:12

#resField это простой div со вложенным в него span'ом. Как и зачем бы собрались его блокировать?

@Дмитрий Дмитрий · 08.10.2016, 14:56 **[ТС]**

Понял

Добавлено через 5 минут
Работает спасибо!!! Вы как всегда лучший!!!

Добавлено через 1 час 54 минуты
В продолжении темы.
С числами мы определились, но если
resField.innerHTML = counts[0];
то
wb_result.innerHTML = (+60 + +result).toFixed(2);
если
resField.innerHTML = counts[1];
то
wb_result.innerHTML = (+90 + +result).toFixed(2);
если
resField.innerHTML = counts[2];
то
wb_result.innerHTML = (+120 + +result).toFixed(2);

Вставил в код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function stCalc() {
  if (ckeckBox.checked) {
    if (editbox1.value >= 0.4 && editbox1.value <= 1.8) {
      resField.innerHTML = counts[0];
      wb_result.innerHTML = (+60 + +result).toFixed(2);
    } else if (editbox1.value >= 1.81 && editbox1.value <= 2.5) {
      resField.innerHTML = counts[1];
    } else if (editbox1.value >= 2.51 && editbox1.value <= 3.5) {
      resField.innerHTML = counts[2];
    } else if (editbox1.value >= 3.51 && editbox1.value <= 4) {
      resField.innerHTML = counts[3];
    }
  }
}

Не работает.
Исходник

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
39
40
41
42
43
44
<script>
var myFunc = function () {
        var editbox1 = parseFloat(document.getElementById('editbox1').value);
        var editbox2 = parseFloat(document.getElementById('editbox2').value);
        var buttonValue = parseFloat(this.value);
        var wb_result = document.getElementById('wb_result');
        var result = 0;
        result = (editbox1 * editbox2 * buttonValue).toFixed(2);
        wb_result.innerHTML = result;
      };
 
resField = document.getElementById('wb_zk'),
     ckeckBox = document.getElementById('check'),
     resFieldFirstVal = resField.innerHTML,
     counts = [2, 3, 4, 5];
 
ckeckBox.addEventListener('change', showHideRes.bind());
ckeckBox.addEventListener('change', stCalc.bind());
editbox1.addEventListener('input', stCalc.bind());
 
function showHideRes(elem) {
  if (ckeckBox.checked){
    resField.style.display = 'block';
  } else {
    resField.innerHTML = resFieldFirstVal;
    resField.style.display = 'none';
  }
}
 
function stCalc() {
  if (ckeckBox.checked) {
    if (editbox1.value >= 0.4 && editbox1.value <= 1.8) {
      resField.innerHTML = counts[0];
      wb_result.innerHTML = (+60 + +result).toFixed(2);
    } else if (editbox1.value >= 1.81 && editbox1.value <= 2.5) {
      resField.innerHTML = counts[1];
    } else if (editbox1.value >= 2.51 && editbox1.value <= 3.5) {
      resField.innerHTML = counts[2];
    } else if (editbox1.value >= 3.51 && editbox1.value <= 4) {
      resField.innerHTML = counts[3];
    }
  }
}
</script>

Добавлено через 2 часа 41 минуту
Сделал так:
добавил

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ckeckBox.addEventListener('change', stCalc.bind());
function dtCalc() {
var s = [60, 90, 120, 150]
  if (ckeckBox.checked) {
  if (resField.innerHTML = counts[0]) {
  wb_result.innerHTML = (+s[0] + +result).toFixed(2);
  } else if (resField.innerHTML = counts[1]) {
  wb_result.innerHTML = (+s[1] + +result).toFixed(2);
  } else if (resField.innerHTML = counts[2]) {
  wb_result.innerHTML = (+s[2] + +result).toFixed(2);
  } else if (resField.innerHTML = counts[3]) {
  wb_result.innerHTML = (+s[3] + +result).toFixed(2);
   }
  }
}

Не пашет.

@Дмитрий Дмитрий · 09.10.2016, 16:58 **[ТС]**

Многоуважаемый mrtoxas, не бросайте чайника)) подскажите по коду.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@codding_hanter 25 / 25 / 20 Регистрация: 12.05.2016 Сообщений: 181
	07.10.2016, 17:20
	Не могли бы вы обяснить немного подробнее?А то както все слишком запутано както вы написали. 1

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	07.10.2016, 19:24 [ТС]
	Ребят, вы спецы дай бог каждому, ну скачайте код, там все понятно, все косяки на глазах. Что именно не понятно? 0

@codding_hanter 25 / 25 / 20 Регистрация: 12.05.2016 Сообщений: 181
	07.10.2016, 20:15
	Не понятно задание,обясните проще. 1

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	07.10.2016, 20:36
	Грамотно сформулированный вопрос - половина успеха. 1

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.10.2016, 10:12
	#resField это простой div со вложенным в него span'ом. Как и зачем бы собрались его блокировать? 1

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	09.10.2016, 16:58 [ТС]
	Многоуважаемый mrtoxas, не бросайте чайника)) подскажите по коду. 0

Подскажите с chekbox и выводом чисел

Решение