Изменение значения текстового поля после выбора разных 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, Пифагор, огромное Вам спасибо что помогли, да, именно так я это и представлял. Ваши решения мне очень помогли! Еще раз всем преогромнейшее спасибо, что откликнулись и помогли с кодом.

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@Пифагор 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