JS - Программно назначить обработчик клика на чекбокс

Question

Господа, я заранее извиняюсь, что задаю довольно простой вопрос, но сам я за полночи разоброаться не смог. У меян есть "одностраничное приложение". Весь код - это js, которым я вставляю в страницу нужные эементы. Чекбоксики. Выглядит это примерно так:

// вначале есть массив исходных данных resp.data
let elem = document.getElementById('div_for_checkboxes');

// добавляем в него checkbox'ы
for (var i=0; i<=resp.data.length-1; i++) {
    var item = resp.data[i]; // item - это json - структура вида {
                                                        //    "id": 42,
                                                        //    "name": "О странствующих и путешествующих"
                                                        //   }
    // программно создаю чекбокс
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = item["id"];
    checkbox.value = item["id"];
    checkbox.onclick = function(){ alert('??'); };

    // программно создаю label
    var label = document.createElement('label')
    label.htmlFor = item["id"];
    label.appendChild(document.createTextNode(item["name"]));

    // добавляю  то и другое в предназначенный для этого div
    elem.appendChild(checkbox);
    elem.appendChild(label);
    elem.innerHTML += ' &nbsp;&nbsp;&nbsp;';
};

Так, как написано в коде -

checkbox.onclick = function(){ alert('??'); };

событие не добавляется.

Пробовал еще и так:

elem.innerHTML += ' onclick=name_of_js_function();';

в результате это текст просто дописывается на страницу

Пробовал еще так:

checkbox.innerHTML += ' onclick="alert(\'!!!\');"';

тоже не работает.

Не могу понять, как ему подсунуть этот обработчик события. Спасибо заранее за советы!

Answer 1

Сотрите строку кода elem.innerHTML += '    '. Не уверен в том, зачем она, но она что-то перезаписывает в дочерних элементах элемента с id 'div_for_checkboxes'. Возможно, вместо elem.innerHTML, вам нужно использовать метод insertAdjacentHTML

// вначале есть массив исходных данных resp.data
let elem = document.getElementById('div_for_checkboxes');
let resp = {};
resp.data = [{
  "id": 42,
  "name": "О странствующих и путешествующих"
}]

// добавляем в него checkbox'ы
for (var i = 0; i <= resp.data.length - 1; i++) {
  var item = resp.data[i]; // item - это json - структура вида {
  //    "id": 42,
  //    "name": "О странствующих и путешествующих"
  //   }
  // программно создаю чекбокс
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = item["id"];
  checkbox.value = item["id"];
  checkbox.onclick = function() {

    alert('??');
  };

  // программно создаю label
  var label = document.createElement('label')
  label.htmlFor = item["id"];
  label.appendChild(document.createTextNode(item["name"]));

  // добавляю  то и другое в предназначенный для этого div
  elem.appendChild(checkbox);
  elem.appendChild(label);
  
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // elem.innerHTML += ' &nbsp;&nbsp;&nbsp;';
};

<div id="div_for_checkboxes">

Answer 2

Парни, большое спасибо, что Вы меня вразумляли и давали полезные советы.

Напомню еще раз, что мне нужно к каждому чекбоксу привязать обработчик события, и в этом обработчике я должен понимать, по какому чекбоксу кликнули.

К сожалению, 1) все методы "дописывания события onclick прямо в HTML" при динамическом создании элемента (имеются в виду elem.innerHTML +=... и метод insertAdjacentHTML) обладают какими то глубинными недостатками, из за которых обработчик события не вызывается.

2) При добавлении обработчика события методом .addEventListener

var ch = document.getElementById(tr["id"]);
ch.addEventListener( "click", ()=>cb_tr_click(tr["id"]) );

итспользуются анонимные функции. А они обладают свойством: прии вызове они вызываются с текущим значением аргумента. Ну, то есть, в тот момент, когда работает цикл, в котором создаются чекбоксы - их ID известен, но в это тмомнет функция не вызывается. А когад происходит клик - то этот ID вообще не имеет смысла, потому что цикл отработал и переменная вышла из области видимости - короче, обработчик всегда вызывался с нулдевым аргументом.

Последний совет мне дал товарищ "в оффлайне", и его решение реально работает:

        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = tr["id"];
        checkbox.value = tr["id"];
        checkbox.setAttribute("onclick","alert('"+tr["id"]+"');");

Спасибо еще раз!

Answer 3

addEventListener('input', ()=> ... Будет срабатывать каждый раз, когда значение checkBox меняется (то есть, когда на него кликнет пользователь)

БЛОГ НА HUSL

JS - Программно назначить обработчик клика на чекбокс

Ответы (3 шт):