Получить имя чекбокса по клику на него

@TampLieR · Регистрация: 28.07.2014

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

Здравствуйте, не могу решить вроде бы не сложную задачу.
Общими словами: есть на страничке много чекбоксов и форм, хочу по клику на чекбокс получить имя чекбокса по которому щёлкнули.
Подробно:
Условие
Есть 142 формы сформированных циклом и пронумерованных от 1 до 142. Каждая форма содержит инпут с количеством товара, ценой товара и чекбокс.
Имя инпутов помещённых в форму соответствует имени формы следующим образом - "kol_'Номер_формы'", "price_'Номер_формы'". Имя чекбокса = "'Номер_формы'".

HTML5
1
2
3
4
5
<form name="<?=$row['id']?>"><!-- $row['id'] - Тут значения от 1 до 142 -->
        <input type="text" name="kol_<?=$row['id']?>" value="1" required />
        <input type="hidden" name="price_<?=$row['id']?>" value="<?=$row['price']?>" />
        <input type="checkbox" name="<?=$row['id']?>" onclick="sum()" />
    </form>

Задача
При помощи JavaScript по нажатию на чекбокс определить имя чекбокса, посчитать цену товара и занести чекбокс в массив. При повторном нажатии удалить чекбокс из массива и пересчитать цену.
Спасибо!

@YakobsEA · 16.02.2016, 00:29

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
    <meta charset="utf-8">
    <title>GetObjName</title>
</head>
<body>
 
<input type="text" name="Моё имя" value="1" required OnClick="GetName1(event);"/>
 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
 
function GetName1(e){
    var El1 = e.target;
    
    alert(El1.getAttribute('Name'));
}
    // -->
    </SCRIPT>
 
</body>

@kalabuni · 16.02.2016, 02:34

у каждого элемента формы имеется свойство form, поэтому добавлять номер формы к имени каждого элемента - это совершенно лишнее

опишите подробнее - массив какого вида вам надо формировать и куда этот массив помещать/отправлять, тогда и можно будет вам помочь с конкретным кодом

@TampLieR · 16.02.2016, 14:58 **[ТС]**

YakobsEA, Спасибо, частично помогло.
А можно теперь подставить значения переменных в две последние строчки? Если можно то как?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        function sum(e) 
        {
            var El1 = e.target;
            /*alert(El1.getAttribute('name'));*/
            var a = eval(El1.getAttribute('name'));
            var form_name = "f"+parseFloat(a);
            var input_name_p = "p"+parseFloat(a);
            var input_name_kol = "kol"+parseFloat(a);
 
            var price = document.form_name.input_name_p.value;
            var kol = document.form_name.input_name_kol.value;}

Добавлено через 1 час 59 минут
kalabuni, может быть Вы мне поможете? ↑
До массива я ещё не дошёл, может быть и не понадобится...

@kalabuni · 16.02.2016, 18:45

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

До массива я ещё не дошёл, может быть и не понадобится...

так что вам тогда нужно-то?

просто посчитать общую сумму?

смотрите на примере 3 (трёх) форм

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
<script>
 
onload = function ()
{
function mySum () {
                  for (var S = j = 0; j < J; j++) if (cB [j].checked) 
                     {var F = cB [j].form; S += F ['kol'].value * F ['price'].value}
                  document.getElementById ('sum').innerHTML =  S.toFixed (2);
                  }
for (var cB = document.querySelectorAll('input[type=checkbox]'), j = 0, J = cB.length; j < J; j++)
   cB [j].onclick = mySum, cB [j].form ['kol'].onchange = mySum; 
 
                 
}
</script>
 
<ol>
<li><form name="n1">
<input type="number" min="1" name="kol" value="1" required>
<input type="hidden" name="price" value="2.00">
<input type="checkbox">
</form>
<hr>
<li><form name="n2">
<input type="number" min="1" name="kol" value="1" required>
<input type="hidden" name="price" value="3.50">
<input type="checkbox">
</form>
<hr>
<li><form name="n142">
<input type="number" min="1" name="kol" value="1" required>
<input type="hidden" name="price" value="4.37">
<input type="checkbox">
</form>
<hr>
<div style="background-color: #ccc; text-align: center; height: 40px; line-height: 40px; width: 432px">
Выбрано товаров на сумму
<span id="sum">0.00</span>
</div>

@TampLieR · 16.02.2016, 19:58 **[ТС]**

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

так что вам тогда нужно-то?

kalabuni, Вы всё правильно поняли, это именно то что нужно для выполнения всего задания.
Просто моя логика немного отличается от вашей и я хочу сделать немного по другому, если это возможно.
Поэтому у меня есть вопрос.
С помощью строчки кода:

JavaScript
1
var price = document.Имя_Формы.Имя_инпута.value;

можно получить значение содержащееся в одном инпуте.
Можно ли за место Имени формы и имени инпута подставлять переменные, если да, то как?
У меня в коде эти 2 строчки не работают, потому что так делать нельзя, а как можно я не нашёл.

JavaScript
1
2
var price = document.form_name.input_name_p.value;
            var kol = document.form_name.input_name_kol.value;

kalabuni, не могли бы Вы ещё немного пояснить Ваш код, хотя бы в общих словах.

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

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

у каждого элемента формы имеется свойство form, поэтому добавлять номер формы к имени каждого элемента - это совершенно лишнее

я этого не знал

@kalabuni · 16.02.2016, 20:20

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

не могли бы Вы ещё немного пояснить Ваш код, хотя бы в общих словах.

во-первых, вместо <input type="text"> я использовал <input type="number"> потому, что в текстовой инпут юзер может совершенно случайно ввести не целое число, а, например, какую-нить букву
а мы по любому количество должны умножать на цену, т.е. производить арифметическое действие над числами
следовательно, придётся написать много кода, чтобы проверить - а что там, в текстовом инпуте - "число или что-то другое?" и, "если число, то какое именно - вдруг оно нецелое или отрицательное?"
<input type="number"> нас от всех этих проверок освобождает - в этом поле всегда будет целое число и можно установить его пределы - минимальное и максимальное значения

во-вторых, уже после клика по чекбоксу юзер может изменить значение поля "количество", поэтому кроме клика по чекбоксу (событие onclick) надо проверять и изменение значения в поле "количество" (событие onchange)

в третьих, как написано выше (в первом моём сообщении в этой теме), у любого инпута (любого типа) можно спросить - "а в какой именно форме ты, брат, находишься?" (это я про свойство form элементов формы)

в четвёртых, проверяя подряд все чекбоксы на странице на их "отмеченность", при наличии отметки код как раз спрашивает у отмеченного чекбокса - в какой имено он форме находится и, зная это, тут же узнаёт значение соответствующих полей "количество" и "цена" этой формы и перемножает их (и суммирует все такие произведения)

не знаю уж, что ещё тут пояснять?

JavaScript
1
2
3
4
5
6
var formName = 'myForm1'; // строка с именем формы занесена в переменную formName
 
var inputName = 'kol'; //строка с именем поля  формы занесена в переменную  inputName
 
 
alert (document [formName][inputName].value) ; // получаем и выводим значение этого конкретного поля конкретной формы

@TampLieR · 16.02.2016, 20:45 **[ТС]**

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

не знаю уж, что ещё тут пояснять?

Я просто не умею программировать и если язык разметки мне ещё понятен, то понять значение переменной cB сложновато.

JavaScript
1
cB = document.querySelectorAll('input[type=checkbox]')

Это массив всех элементов в форме или чекбоксов?

JavaScript
1
J = cB.length;

Это длина массива?

JavaScript
1
cB [j].onclick = mySum, cB [j].form ['kol'].onchange = mySum;

Это значит для пересчёта суммы если изменили цифру. Понятно, а если изменили не с помощью стрелок в инпуте, то уже не пересчитывает

JavaScript
1
S += F ['kol'].value * F ['price'].value

Я не знал что так можно складывать , но читал сегодня про переменные в java.

JavaScript
1
F = cB [j].form

Это я вообще не понял

JavaScript
1
document.getElementById ('sum').innerHTML =  S.toFixed (2);

Мы же ID нигде не использовали или они автоматически подразумеваются?

JavaScript
1
S.toFixed (2)

?
P.S. Вот так у меня с JavaScript

@kalabuni · 16.02.2016, 21:06

cB = document.querySelectorAll('input[type=checkbox]') - это коллекция* всех инпутов типа чекбокс на странице -- и те, что находятся внутри любых форм и даже вне форм (если бы такие были)

*Коллекция очень похожа на массив, но это не массив, например, её нельзя "перевернуть задом наперёд" методом reverse (), её нельзя отсортировать методом sort (), к ней нельзя добавить элементы (и нельзя удалить существующие)

J = cB.length; - количество элементов в коллекции (похоже на длину массива, но здесь его тоже нельзя изменить, как длину массива)

cB [j].onclick = mySum, каждому чекбоксу на странице на событие клика по нему назначаем запуск функции MySum ()

cB [j].form ['kol'].onchange = mySum; (каждому полю с именем [COLOR="Blue"kol[/COLOR] (во всех формах) по событию изменения его значения назначаем запуск функции MySum ()

S += F ['kol'].value * F ['price'].value равносильно записи S = S + F ['kol'].value * F ['price'].value

F = cB [j].form -это мы у каждого чекбокса спрашиваем, а из какой он формы. Чекбокс отвечает и мы его ответ записываем в переменную F

document.getElementById ('sum').innerHTML = S.toFixed (2);

Мы же ID нигде не использовали или они автоматически подразумеваются?

срочно обратитесь к окулисту - в коде имеется <span id="sum"></span>

S.toFixed (2); число S преобразуется в строку c двумя знаками после запятой

@TampLieR · 16.02.2016, 21:06 **[ТС]**

kalabuni,

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

JavaScript
1
2
3
var formName = 'myForm1'; // строка с именем формы занесена в переменную formName
var inputName = 'kol'; //строка с именем поля формы занесена в переменную *inputName
alert (document [formName][inputName].value) ; // получаем и выводим значение этого конкретного поля конкретной формы

У меня же не так. Попытался преобразовать - не работает.

JavaScript
1
2
3
var form_name = "f"+parseFloat(a); // строка с именем формы занесена в переменную form_name
var input_name_p = "p"+parseFloat(a); // строка с именем поля*формы занесена в переменную input_name_p
var price = eval(document[form_name][input_name_p].value);

@kalabuni · 16.02.2016, 21:12

а зачем корове седло под названием eval?
Вы у меня где-то это видели?

В общем, отдыхайте - курс начинающего javascript-программиста я проводить не буду

@TampLieR · 16.02.2016, 21:23 **[ТС]**

kalabuni, спасибо, и так всё разжевали

, просто люблю делать по своему, если могу конечно

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

Получить имя чекбокса по клику на него

Решение

Решение

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	16.02.2016, 02:34
	у каждого элемента формы имеется свойство form, поэтому добавлять номер формы к имени каждого элемента - это совершенно лишнее опишите подробнее - массив какого вида вам надо формировать и куда этот массив помещать/отправлять, тогда и можно будет вам помочь с конкретным кодом 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	16.02.2016, 21:12
	а зачем корове седло под названием eval? Вы у меня где-то это видели? В общем, отдыхайте - курс начинающего javascript-программиста я проводить не буду 0

@TampLieR 7 / 7 / 5 Регистрация: 28.07.2014 Сообщений: 104
	16.02.2016, 21:23 [ТС]
	kalabuni, спасибо, и так всё разжевали , просто люблю делать по своему, если могу конечно 0