Изменение значения текстового поля после выбора разных checkbox

@Aleksey1968 · Регистрация: 01.12.2016

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

Здравствуйте.
Прошу помочь с кодом, так как в js полный нуль. Есть обычная таблица вот такого вида https://jsfiddle.net/w51z34oj/1/ код такой:

HTML5
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<form name="rem">
<table class='my-table'>
    <thead>
    <tr>
        <th>Рабочие</th>
        <th>Срочно</th>
        <th>Обычно</th>
    </tr>
    </thead>
    <tbody class='order-set'>
    <tr>
        <td>
            Строитель
        </td>
        <td>
            <input type="checkbox" id="h-first" name="first" value="4"/>
            <label for="h-first">Один</label>
        </td>
        <td>
            <input type="checkbox" id="h-second" name="second" value="4" />
            <label for="h-second">Двое</label>
        </td>
    </tr>
    <tr>
        <td>
            Отделочник
        </td>
        <td>
            <input type="checkbox" id="f-first" name="first" value="2"/>
            <label for="f-first">Один</label>
        </td>
        <td>
            <input type="checkbox" id="f-second" name="second" value="2" />
            <label for="f-second">Двое</label>
        </td>
    </tr>
    <tr>
        <td>
            Уборщик
        </td>
        <td>
            <input type="checkbox" id="u-first" name="first" value="1"/>
            <label for="u-first">Один</label>
        </td>
        <td>
            <input type="checkbox" id="u-second" name="second" value="1" />
            <label for="u-second">Двое</label>
        </td>
    </tr>
    </tbody>
    <tbody class='chioce-result'>
    <tr>
        <td colspan="2">Код заказа</td>
        <td>
            <input type="text" name="code" value="------" size="6" READONLY="1" class="result-code" />
        </td>
    </tr>
    <tr>
        <td colspan="2">Цена заказа</td>
        <td>
            <input type="text" name="price" value="000" size="4" class="result-price"/>
        </td>
    </tr>
    </tbody>
</table>
</form>

Я хотел бы чтобы при выборе одного или нескольких чекбоксов изменялось значение в категории , таким образом чтобы значения (value) выбранных чекбоксов суммировались и изменяли первое значение поля "Цена заказа", если выбраны "срочно" и второе - если "обычно"
а в поле "Код заказа" изменялись соответствующие символы поочередно - 1-ый чекбокс - 1-символ , 2-ое - второй символ и так далее, на значения чекбоксов. Как это сделать я просто не могу понять, каким образов получить и изменить определенный символ значения текстового инпута по клику? Кто знает подскажите пожалуйста как это вообще делается или куда копать?!

@Пифагор · 01.12.2016, 17:14

Сделать не пытался, но при беглом обзоре скажу, что ИМХО лучше не чекбоксы использовать, а радиокнопки.

@Aleksey1968 · 01.12.2016, 17:17 **[ТС]**

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

@Azdeman · 01.12.2016, 19:11

Cделал прибавление суммирование значений value чебоксов.
https://jsfiddle.net/w51z34oj/3/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var _ = document.getElementsByTagName('input'),
    __ = 0;
for(var i=0;i<=5;i++){
_[i].onchange = function(e){
if(e.target.checked){
__ = parseInt(__) + parseInt(e.target.value);
document.getElementsByClassName('result-price')[0].value=__;
}else{
__ = parseInt(__) - parseInt(e.target.value);
document.getElementsByClassName('result-price')[0].value=__;
}
 }
}

@Aleksey1968 · 01.12.2016, 20:59 **[ТС]**

Azdeman, да, спасибо большое, Ваш ответ мне очень помог, это практически то что нужно, но не могли вы мне подсказать как мне добраться отдельно до каждого (первого и второго) значения строки с ценой для того, чтобы изменялось не всё значение (value) в графе "Цена заказа", а только первые два.
Т.е. я имею в виду когда выбираются чекбоксы из колонки "Срочно" (строки с значением "Один") меняется(суммируются значения чекбоксов "Один" ) в первое значение = х00, когда из колонки "Обычно" - то второе 0х0.

Чтобы оно как бы сразу сумму показывало, например выбрано Строитель-Двое, Отделочник-Один, Уборщик-Один и цена равна 280 = 2, 6+2, 0

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

@Azdeman · 01.12.2016, 21:52

HTML-код:

HTML5
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<form name="rem">
<table class='my-table'>
    <thead>
    <tr>
        <th>Рабочие</th>
        <th>Срочно</th>
        <th>Обычно</th>
    </tr>
    </thead>
    <tbody class='chmod_set'>
    <tr>
        <td>
            Строитель
        </td>
        <td>
            <input type="checkbox" id="h-first" name="first" value="1"/>
            <label for="h-first">Один</label>
        </td>
        <td>
            <input type="checkbox" id="h-second" name="second" value="2" />
            <label for="h-second">Двое</label>
        </td>
    </tr>
    <tr>
        <td>
            Отделочник
        </td>
        <td>
            <input type="checkbox" id="f-first" name="first" value="3"/>
            <label for="f-first">Один</label>
        </td>
        <td>
            <input type="checkbox" id="f-second" name="second" value="6" />
            <label for="f-second">Двое</label>
        </td>
    </tr>
    <tr>
        <td>
            Уборщик
        </td>
        <td>
            <input type="checkbox" id="u-first" name="first" value="2"/>
            <label for="u-first">Один</label>
        </td>
        <td>
            <input type="checkbox" id="u-second" name="second" value="4" />
            <label for="u-second">Двое</label>
        </td>
    </tr>
    </tbody>
    <tbody class='chioce-result'>
    <tr>
        <td colspan="2">Код заказа</td>
        <td>
            <input type="text" name="code" value="------" size="6" READONLY="1" class="result-code" />
        </td>
    </tr>
    <tr>
        <td colspan="2">Цена заказа</td>
        <td>
            <input type="text" name="price" value="000" size="4" class="result-price"/>
        </td>
    </tr>
    </tbody>
</table>
</form>

Javascript:

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
var _ = document.getElementsByTagName('input'),
    __ = 0,
    ___ = 0;
for(var i=0;i<=5;i++){
_[i].onchange = function(e){
var this_ = this.getAttribute('id');
    if(this_ == 'f-first' ||
     this_ =='h-first'  || 
     this_ =='u-first'){
if(e.target.checked){
__ = parseInt(__) + parseInt(e.target.value);
var c = document.getElementsByClassName('result-price')[0].value;
var r = c[1]+c[2];
document.getElementsByClassName('result-price')[0].value=__+r;
}else{
__ = parseInt(__) - parseInt(e.target.value);
c = document.getElementsByClassName('result-price')[0].value;
r = c[1]+c[2];
document.getElementsByClassName('result-price')[0].value=__+r;
}
}else{
 
if(e.target.checked){
___ = parseInt(___) + parseInt(e.target.value);
var q  = document.getElementsByClassName('result-price')[0].value;
var c =q[0]+___+'0';
document.getElementsByClassName('result-price')[0].value =c;
}else{
___ = parseInt(___) - parseInt(e.target.value);
 q  = document.getElementsByClassName('result-price')[0].value;
 c =q[0]+___+'0';
document.getElementsByClassName('result-price')[0].value =c;
}
 
 
}
 
} 
}

Песочница: https://jsfiddle.net/w51z34oj/5/

@Пифагор · 02.12.2016, 01:10

Aleksey1968, если я все правильно прочел, то вот решение по первоначальному ТЗ:

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 input = document.getElementsByTagName('input');
var summ = 0;
for(var i = 0; i<input.length; i++){
  if(input[i].type === 'checkbox'){
    input[i].setAttribute('index', i-1);
    input[i].onchange = function(e){
      var item = e.target || e.srcElement;
      var price = document.getElementsByName('price')[0];
      var i = item.getAttribute('index');
      var str = document.getElementsByClassName('result-code')[0];
      var split = str.defaultValue.split("");
      if(item.checked){
        console.log(item.getAttribute('index'));
        split[i] = (i*1 + 1);
        var _str = split.join("");
        str.defaultValue = _str;
        summ += parseInt(item.value);
      }else{
        split[i] = '-';
        var __str = split.join("");
        str.defaultValue = __str;
        summ -= parseInt(item.value);
      }
      price.value = summ;
    }
  }
}

@Aleksey1968 · 02.12.2016, 11:29 **[ТС]**

Azdeman, Пифагор, огромное Вам спасибо что помогли, да, именно так я это и представлял. Ваши решения мне очень помогли! Еще раз всем преогромнейшее спасибо, что откликнулись и помогли с кодом.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	01.12.2016, 17:14
	Сделать не пытался, но при беглом обзоре скажу, что ИМХО лучше не чекбоксы использовать, а радиокнопки. 0

@Aleksey1968 0 / 0 / 0 Регистрация: 01.12.2016 Сообщений: 4
	01.12.2016, 17:17 [ТС]
	Загвоздка в том, что нужно чтобы была возможность выбора сразу нескольких вариантов в разных категориях. 0

@Aleksey1968 0 / 0 / 0 Регистрация: 01.12.2016 Сообщений: 4
	01.12.2016, 20:59 [ТС]
	Azdeman, да, спасибо большое, Ваш ответ мне очень помог, это практически то что нужно, но не могли вы мне подсказать как мне добраться отдельно до каждого (первого и второго) значения строки с ценой для того, чтобы изменялось не всё значение (value) в графе "Цена заказа", а только первые два. Т.е. я имею в виду когда выбираются чекбоксы из колонки "Срочно" (строки с значением "Один") меняется(суммируются значения чекбоксов "Один" ) в первое значение = х00, когда из колонки "Обычно" - то второе 0х0. Чтобы оно как бы сразу сумму показывало, например выбрано Строитель-Двое, Отделочник-Один, Уборщик-Один и цена равна 280 = 2, 6+2, 0 Спасибо большое. 0

@Aleksey1968 0 / 0 / 0 Регистрация: 01.12.2016 Сообщений: 4
	02.12.2016, 11:29 [ТС]
	Azdeman, Пифагор, огромное Вам спасибо что помогли, да, именно так я это и представлял. Ваши решения мне очень помогли! Еще раз всем преогромнейшее спасибо, что откликнулись и помогли с кодом. 0

Опции темы