Как получить вход от динамически создаваемых флажков и переключателей в JavaScript? - PullRequest
Новая
       37

Как получить вход от динамически создаваемых флажков и переключателей в JavaScript?

1 голос
/ 04 июня 2019

Мне нужно динамически создавать флажки и переключатели в отображаемых группах данных, затем мне нужно выбрать пользовательский выбор и поместить его в переменные.

Я сделал пример с несколькими флажками и переключателями, но я не знаю, как на самом деле получить ввод:

Вот это jsfidle 

var t = document.getElementById("container");

var data1 = ['TV', 'Newspaper', 'Internet'];
var data2 = ['New York', 'Washington', 'Los Angeles'];

t.innerHTML += checkbutton(data1);
t.innerHTML += radiobutton(data2);

function checkbutton(d) {
  var output = "";

  for (var i = 0; i < d.length; i++) {
    output += '<input type="checkbox" value=' + d[i] + ' name="box2">' + '   ' + d[i] + '   ' + '<br><br>';
  }
  return output;
}

function radiobutton(d) {
  var output = "";

  for (var i = 0; i < d.length; i++) {
    output += '<input type="radio" value=' + d[i] + ' name="box2">' + '   ' + d[i] + '   ' + '<br><br>';
  }
  return output;
}
<div id="container"></div>

Ответы [ 2 ]

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

Используя javascript, вы можете запрашивать определенные свойства html-элементов, такие как переключатели и флажки.Чтобы сделать это, каждый элемент должен иметь уникальный идентификатор - чтобы мы могли получить элемент, используя document.getElementById(id).Другой вариант - получить элементы по их типу, например document.getElementsByTagName("input").Это вернет html коллекцию - массив - всех элементов ввода.С помощью простого цикла for вы можете перебирать этот массив, а с помощью свойства .checked вы можете узнать, выбрано ли одно из этих полей ввода. 

var t = document.getElementById("container");

var data1 = ['TV', 'Newspaper', 'Internet'];
var data2 = ['New York', 'Washington', 'Los Angeles'];

t.innerHTML += checkbutton(data1);
t.innerHTML += radiobutton(data2);

function checkbutton(d) {
  var output = "";

  for (var i = 0; i < d.length; i++) {
    output += '<input type="checkbox" value="' + d[i] + '" name="box2">' + '   ' + d[i] + '   ' + '<br><br>';
  }
  return output;
}

function radiobutton(d) {
  var output = "";

  for (var i = 0; i < d.length; i++) {
    output += '<input type="radio" value="' + d[i] + '" name="box2">' + d[i] +  '<br><br>';
  
  }
  return output;
}

function check() {
  var elements = document.getElementsByTagName("input");
  for (var a = 0; a < elements.length; a++) {
        if (elements[a].checked) {
          console.log(elements[a].value + " is checked");
        }	
  }
}
<div id="container"></div>
<button id="check" onclick="check()">
check
</button>
0 голосов
/ 04 июня 2019

Как это?

Обратите внимание на слушателей событий и смену имен

Также убедитесь, что вы цитируете имена и значения 

function checkbutton(d) {
  var output = "";

  for (var i = 0; i < d.length; i++) {
    output += '<label><input type="checkbox" value="' + d[i] + '" name="box'+i+'">' + '   ' + d[i] + '   ' + '</label><br><br>';
  }
  return output;
}

function radiobutton(d) {
  var output = "";

  for (var i = 0; i < d.length; i++) {
    output += '<label><input type="radio" value="' + d[i] + '" name="rad">' + '   ' + d[i] + '   ' + '</label><br><br>';
  }
  return output;
}

window.addEventListener("load", function() {
  var t = document.getElementById("container");
  var b = document.getElementById("but");

  var data1 = ['TV', 'Newspaper', 'Internet'];
  var data2 = ['New York', 'Washington', 'Los Angeles'];

  t.innerHTML += checkbutton(data1);
  t.innerHTML += radiobutton(data2);

  t.addEventListener("change",function(e) {
    var tgt = e.target;
    if (["radio","checkbox"].indexOf(tgt.type) !=-1) { // only look at checkboxes and radios. Change if needed
      console.log(tgt.value); 
    }
  });
  
  b.addEventListener("click",function() {
    var vars = {}
    t.querySelectorAll("input").forEach(inp => { 
       if (inp.checked) vars[inp.name]=inp.value 
    });
    console.log(vars);
  })

})
<div id="container"></div>
<button type="button" id="but">Click</button>
...