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

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

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