如何从JavaScript中动态创建的复选框和单选按钮获取输入？

Question

我需要在显示的数据组中动态创建复选框和单选按钮，然后我需要接受用户的选择并将其放入变量中。

我举了一个带有几个复选框和单选按钮的示例，但是我不知道如何实际获取输入：

这是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> 

Answer 1

像这样？

注意事件侦听器和名称的更改

还要确保引用名称和值

 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> 

Answer 2

使用javascript，您可以查询html元素的特定属性-例如单选按钮和复选框。 为了做到这一点，每个元素都应该有一个唯一的id-这样我们就可以使用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>