1

Это фрагмент таблицы с суммами для загрузки в БД. При загрузке (в параметрах хранимой процедуры БД) у каждого банка есть свой параметр, который передается в атрибуте чекбокса: 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' начинают хаотично выделяться и сниматься. В общем, работает не так как надо, хотя цвет ячейки меняется правильно.

Подскажите, пожалуйста, может эту одновременную установку/снятие флажков для группы надо не через атрибут, а через свойство делать? Или в коде у меня какие-то ошибки, из-за которых программа ведет себя не так, как хотелось бы?

2
  • отформатируйте чтобы можно было читать
    – user283873
    26 мая 2018 в 23:48
  • "... то видно, что флажки ..." не видно (((( 27 мая 2018 в 4:30

2 ответа 2

0

Если вкратце, то проблема в том, что вы пытаетесь работать с состоянием не через свойство, а через атрибут.

Давайте пройдёмся по шагам и поймём, что происходит. Чтобы цвет не сбивал вас с толку, отключите его изменение и следите только за состоянием чекбоксов.

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

Флаг изменённого состояния

Согласно спецификации инпут имеет булевый флаг изменённого состояния (dirty checkedness flag), что-то вроде пломбы, по которой можно проверить, менял ли пользователь состояние чекбокса. При загрузке страницы он равен false.

HTML-атрибут ≠ DOM-свойство

У элементов есть свойства и атрибуты, это разные сущности. Зачастую их значения связываются между собой, но, есть много но. Например, атрибут id связывается со свойством id, поэтому вы можете написать elem.id = 'newId' и увидеть изменения в DOM. Однако, редактируя текст в <input type="text">, вы не заметите изменений атрибута value, поскольку тот синхронизируется со свойством defaultValue.

И наконец, главное.

Состояние элемента отражается через свойство. В случае с чекбоксом текущее состояние (вкл/выкл) можно получить и записать, обратившись к свойству elem.checked. Давайте посмотрим, как работает ваш код «на атрибутах» и как его можно переписать «на свойствах».


Итак, последовательно прокликаем 4 чекбокса Сбербанка.

  1. В вашем случае сначала происходит клик по первому чекбоксу, меняющий состояние и dirty checkedness flag (он становится true). И только затем выполняется ваша функция. Предварительный итог до выполнения функции:

    ⬜️🚩 ☑️🏳 ☑️🏳 ☑️🏳

    1.1. В функции вы проверяете, имеет ли элемент атрибут checked, ошибочно предполагая, что изменение состояния инпута должно влиять и на атрибут, однако такой зависимости просто не предусмотрено. Вы можете убедиться в этом, создав обычный <input type="checkbox" checked>, кликнув по нему и проверив в инспекторе, что стало с атрибутом (спойлер: ничего). Итог: проверка на наличие атрибута проходит успешно, т. к. он был изначально в коде.

    1.2. Далее по коду вы удаляете атрибут checked у инпутов с тем же значением. И снова обратимся к спецификации: при удалении атрибута checked браузер должен сам изменить состояние на false, но только при условии, что флаг изменённого состояния равен false. Итог:

    ⬜️🚩 ⬜️🏳 ⬜️🏳 ⬜️🏳

  2. Теперь вы делаете клик по второму чекбоксу. Его состояние меняется на отмеченное, флаг изменённого состояния становится true. Предварительный итог:

    ⬜️🚩 ☑️🚩 ⬜️🏳 ⬜️🏳

    2.1. Т. к. у всех чекбоксов Сбербанка атрибут checked был удалён в п. 1.2, в функции вы подаете в условие else.

    2.2. Здесь чекбоксам задаётся атрибут checked. При добавлении атрибута также должен проверяться флаг изменённого состояния, поэтому браузер изменит состояние на вкл только у тех 2-х чекбоксов, у которых флаг ещё равен false. Итог:

    ⬜️🚩 ☑️🚩 ☑️🏳 ☑️🏳

  3. Клик по третьему чекбоксу. Его состояние становится выкл, а флаг dirty checkedness flagtrue. Предварительный итог:

    ⬜️🚩 ☑️🚩 ⬜️🚩 ☑️🏳

    3.1. В функции успешно проходим условие, поскольку добавляли атрибуты в п. 2.2.

    3.2. Удаляем чекбоксам атрибут checked. Браузер изменяет состояние на выкл только у 4-го чекбокса, т. к. у остальных флаги равны true. Итог:

    ⬜️🚩☑️🚩⬜️🚩⬜️🏳

  4. Клик по четвёртому чекбоксу: был выкл, стал вкл. Флаг изменённого состояния тоже становится true. Предварительный итог:

    ⬜️🚩☑️🚩⬜️🚩☑️🚩

    4.1. Попадаем в условие else, т. к. атрибуты удалены в п. 3.2.

    4.2. Добавляем чекбоксам атрибут checked. Браузер смотрит на инпуты, у всех true флаги — разводит руками, ничего сам не переключает. Итог:

    ⬜️🚩☑️🚩⬜️🚩☑️🚩


Работаем с состоянием через свойства

Вместо elem.hasAttribute мы будем получать текущее состояние чекбокса, обращаясь к свойству elem.checked. Для изменения состояния будем перезаписывать это же свойство.

Также для краткости я внёс несколько менее важных изменений:

  • вместо передачи this элемент достаётся из event.target;
  • вместо цикла for перебор элементов реализован через метод массива map (но т. к. querySelectorAll возвращает не массив, а объект типа NodeList, мы одолжим метод у прототипа массива);
  • вместо if использован тернарный оператор.

function have_check() {
    var elem = event.target;
    var elems_group = document.querySelectorAll('input[value="' + elem.value +
        '"]');

    Array.prototype.map.call(elems_group, function(checkbox) {
        checkbox.checked = elem.checked;
        checkbox.parentNode.style.backgroundColor = elem.checked ? 'white' : 'red';
    });
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body>
<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()" 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()" 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()" 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()" 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()" 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()" 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()" 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()" checked>
        </td>
    </tr>
</table>
</body>

</html>

0

Попробуй не ставить аттрибут, а немного другой метод

elem.checked = true | false

        function have_check(elem) {
            var param_value = elem.value;
            var elems_group = document.querySelectorAll('input[value=\'' + param_value +
                '\']');

            if (elem.checked) {
                for (var i = elems_group.length - 1; i >= 0; i--) {
                    elems_group[i].checked = true;
                    elems_group[i].parentNode.style.backgroundColor = 'white';
                }
            } else {
                for (var i = elems_group.length - 1; i >= 0; i--) {
                    elems_group[i].parentNode.style.backgroundColor = 'red';
                    elems_group[i].checked = false;
                }
            }
        }
    <table>
        <tbody>
            <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" name='1_2' 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" name='1_2' 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" name='1_2' 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" name='1_2' 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>
        </tbody>
    </table>

2
  • Спасибо, помогло! А вы не могли бы еще вкратце хотя бы объяснить, почему атрибуты себя так странно ведут? Ведь и галка установлена, и в консоли в браузере я вывожу html-код чекбокса и вижу, что атрибут у элемента установлен, а обработчик клика это игнорирует. Может быть вы посоветуете какую-то статью с более подробным описанием этой особенности атрибутов и свойств? На будущее: работая с чекбоксами, лучше пользоваться именно свойствами, а не атрибутами?
    – Galka
    27 мая 2018 в 12:14
  • В общем точно разобраться не смог, но менять атрибут через setattribute не желательно, ты уже это сам понял. И еще когда ставишь атрибут, также по стандартам нужно ставить только checked="checked". И еще что нашел это - когда через атрибут меняешь, ты меняешь состояние но не значение html элемента. Вот ссылки bugzilla.mozilla.org/show_bug.cgi?id=327020, w3.org/TR/DOM-Level-2-HTML/html.html#ID-30233917, stackoverflow.com/questions/10832640/… 27 мая 2018 в 13:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.