Как добавить атрибут onchange к сгенерированному флажку JavaScript, который срабатывает, когда отмечен / не отмечен? - PullRequest
Новая
       26

Как добавить атрибут onchange к сгенерированному флажку JavaScript, который срабатывает, когда отмечен / не отмечен?

0 голосов
/ 13 июня 2019

У меня большой список людей в json, у них просто есть идентификатор и имя. Ниже я зацикливаюсь на этом, и он работает нормально, добавляя список флажков.

У меня есть еще один похожий, но с более коротким списком json и тем же кодом, так что это не проблема с json, а то, как я пишу свой js-код.

Я делаю ниже.

Создание флажков и ярлыков для каждого человека в obj.people ... 

var peopleLen = obj.People.length;
for (var i = 0; i < peopleLen; i++) {
    if (i < obj.People.length) {
        checkbox = null;
        label = null;
        linebreak = null;

        linebreak = document.createElement('br');
        checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = "target";
        checkbox.value = obj.People[i].ID;
        checkbox.id = "cbTarget" + i.toString();
        label = document.createElement('label');
        label.id = "lbTarget" + i.toString();
        label.htmlFor = "cbTarget" + i.toString();
        //This is where I believe it's wrong:
        checkbox.onclick = function () {
            toggleTargetList(obj.People[i].ID);
        };
        label.appendChild(document.createTextNode('\u00A0\u00A0' + obj.People[i].Name));

        document.getElementById("divcbTargets").appendChild(checkbox);
        document.getElementById("divcbTargets").appendChild(label);
        //Add a line break:
        document.getElementById("divcbTargets").appendChild(linebreak);
    }
}

Функция, которую я ему назначаю: 

function toggleTargetList(t) {
    alert(t);
}

Простое предупреждение.

Когда я меняюсь: 

toggleTargetList(obj.People[i].ID);

Кому: 

toggleTargetList(obj.People[0].ID);

Оповещает правильно отображающий идентификатор первого лица, однако, когда он [i], он предупреждает об этом же значении (первое значение свойства id объекта json).

Не понимаю, почему это так.

Он предупреждает о назначении атрибута флажка, а не о том, когда установлен фактический флажок, что является другой проблемой.

Ответы [ 2 ]

3 голосов
/ 13 июня 2019 
checkbox.onclick = function () {
            toggleTargetList(obj.People[i].ID);
        };

Переменная i находится вне области функции обратного вызова.Удобно, хотя вы уже присваиваете значение obj.People[i].ID для флажков .value свойство. 

checkbox.value = obj.People[i].ID;

Так что просто используйте это как: 

checkbox.onclick = function(event) {
  toggleTargetList(event.target.value);
};
1 голос
/ 13 июня 2019

Попробуйте как 

var obj = {
  People: [{
    ID: 1,
    name: 'Manish'
  }, {
    ID: 2,
    name: 'Manish'
  }, {
    ID: 3,
    name: 'Manish'
  }, {
    ID: 4,
    name: 'Manish'
  }, {
    ID: 5,
    name: 'Manish'
  }]
};

var peopleLen = obj.People.length;

for (var i = 0; i < peopleLen; i++) {
  if (i < obj.People.length) {
    checkbox = null;
    label = null;
    linebreak = null;

    linebreak = document.createElement('br');

    checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = "target";
    checkbox.id = "cbTarget" + i.toString();

    // I have added this code
    checkbox.ID = obj.People[i].ID;
    checkbox.onclick = function() {
      toggleTargetList(this.ID);
    };

    label = document.createElement('label');
    label.id = "lbTarget" + i.toString();
    label.innerText = "cbTarget" + i.toString();
    label.appendChild(document.createTextNode('\u00A0\u00A0' + obj.People[i].name));

    document.getElementById("divcbTargets").appendChild(checkbox);
    document.getElementById("divcbTargets").appendChild(label);
    document.getElementById("divcbTargets").appendChild(linebreak);
  }
}

// I have added this code
function toggleTargetList(index) {
  alert(index);
}
<div id="divcbTargets"></div>

Также у вас может быть подобное событие onchange для этого.

...