Это фрагмент таблицы с суммами для загрузки в БД. При загрузке (в параметрах хранимой процедуры БД) у каждого банка есть свой параметр, который передается в атрибуте чекбокса: value. Мне нужно, чтобы при клике на одном из чекбоксов галка устанавливалась или снималась на всех чекбоксах с таким значением value (и при снятии галки со всех чекбоксов с одинаковым value цвет ячейки подсвечивается красным, а если снова поставить галку - то фон ячейки становится белым). Я реализовала это через атрибуты в обработчике клика на чекбоксе:
function have_check(elem) {
var param_value = elem.value;
var elems_group = document.querySelectorAll('input[value=\'' + param_value +
'\']');
if (elem.hasAttribute('checked')) {
for (var i = elems_group.length - 1; i >= 0; i--) {
elems_group[i].removeAttribute('checked');
elems_group[i].parentNode.style.backgroundColor = 'red';
}
} else {
for (var i = elems_group.length - 1; i >= 0; i--) {
elems_group[i].parentNode.style.backgroundColor = 'white';
elems_group[i].setAttribute('checked', true);
}
}
}
<table>
<tr>
<th>Дата</th>
<th>Сборщик</th>
<th>Сумма</th>
<th>Загрузить</th>
</tr>
<tr>
<td>13.05.2018</td>
<td>Сбербанк</td>
<td>337.35</td>
<td><input type="checkbox" value="1_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>18.05.2018</td>
<td>Сбербанк</td>
<td>248.9</td>
<td><input type="checkbox" value="1_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>21.05.2018</td>
<td>Сбербанк</td>
<td>717.6</td>
<td><input type="checkbox" value="1_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>22.05.2018</td>
<td>Сбербанк</td>
<td>723.45</td>
<td><input type="checkbox" value="1_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>22.05.2018</td>
<td>Альфабанк</td>
<td>723.45</td>
<td><input type="checkbox" value="2_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>24.05.2018</td>
<td>Альфабанк</td>
<td>655.13</td>
<td><input type="checkbox" value="2_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>21.05.2018</td>
<td>ВТБ-24</td>
<td>356.19</td>
<td><input type="checkbox" value="3_2" onclick="have_check(this)" checked></td>
</tr>
<tr>
<td>23.05.2018</td>
<td>ВТБ-24</td>
<td>554.20</td>
<td><input type="checkbox" value="3_2" onclick="have_check(this)" checked></td>
</tr>
</table>
Все бы ничего, но если последовательно кликать на 1-ый, потом 2-ой, потом 3-й и потом 4-й чекбокс, то видно, что флажки в группе с value= '1_2' начинают хаотично выделяться и сниматься. В общем, работает не так как надо, хотя цвет ячейки меняется правильно.
Подскажите, пожалуйста, может эту одновременную установку/снятие флажков для группы надо не через атрибут, а через свойство делать? Или в коде у меня какие-то ошибки, из-за которых программа ведет себя не так, как хотелось бы?