如何使用 javascript 在表格中显示单选和复选框值？

Question

当我单击显示按钮时，它会显示姓名和年龄，但性别和复选框不正确，它只显示第一个值。 我想显示我 select。 应显示无线电数据和复选框数据。

 (function setup() { "use strict"; var NameElem = document.getElementById("name"); var genderElem = document.getElementById("gender"); var ageElem = document.getElementById("age"); var languageElem = document.getElementById("language"); var tableElem = document.getElementById("table"); document.getElementById("display").addEventListener("click", function() { var newRow = tableElem.insertRow(-1); var newCell = newRow.insertCell(0); var newText = document.createTextNode(NameElem.value); newCell.appendChild(newText); newCell = newRow.insertCell(1); newText = document.createTextNode(genderElem.value); newCell.appendChild(newText); newCell = newRow.insertCell(2); newText = document.createTextNode(ageElem.value); newCell.appendChild(newText); newCell = newRow.insertCell(3); newText = document.createTextNode(languageElem.value); [newCell.appendChild][1](newText); NameElem.value = ""; genderElem.value = ""; ageElem.value = ""; languageElem.value = ""; tableElem.value = ""; }); })();

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div class="container"> <br> <br> <h3 class="text-center">Display answers of form fill in inside a table</h3> <br> <br> <form> <div class="form-group"> <label>First Name</label> <input id="name" class="form-control form-control-sm" /> </div> <div class="form-group"> <label>Age</label> <input id="age" class="form-control form-control-sm" /> </div> <div class="form-group"> Gender:<input type="radio" name="male" id="gender" value="male">Male <input type="radio" name="female" id="gender" value="female"> <label for="female">Female</label> </div> <div class="form-group"> <label>Language</label> <input type="checkbox" id="language" name="malayalam" value="Malayalam">Malayalam <input type="checkbox" id="language" name="english" value="English">English <input type="checkbox" id="language" name="hindi" value="Hindi">Hindi </div> <button type="button" id="display" class="btn btn-sm btn-primary">Display</button> </form> <br> <br> <table class="table border" id="table"> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> <th>Language</th> </tr> </table> <script type="text/javascript" src="form.js"></script> </div>

Answer 1

好吧，代码完全符合您的要求。

var genderElem = document.getElementById("gender");
// returns the element with ID "gender"

您正在将name属性与ID混合。 ID 必须始终是唯一的：web 页面不能包含具有相同 ID 的多个元素。

您正在寻找的是名称“性别”的检查输入。

var genderValue = '';
document.querySelectorAll('input[name=gender]').forEach((e)=>{
if (e.checked==true) { genderValue = e.value; }
});

Answer 2

你犯的几个错误：

如果单选按钮和复选框在同一组中，则它们应始终具有相同的名称。

始终保持 ID 不同，为多个元素保持 ID 相同是不好的做法。

当您尝试获取单选按钮或复选框的值时，请使用 getElementsByName 获取它并在单击不在外部的显示按钮时对所有内容运行循环。

更安全的一面并减少 LOC，为您的表单提供一个 ID 并使用formId.reset()方法在提交时重置表单。 （在您的代码中，我给表单一个 id myForm所以我添加了myForm.reset();在提交方法的代码末尾）

请参阅下面的片段：

 (function setup() { "use strict"; var myForm = document.getElementById("myForm"); var NameElem = document.getElementById("name"); var ageElem = document.getElementById("age"); var genderElem = document.getElementsByName('gender'); var languageElem = document.getElementsByName("language"); var tableElem = document.getElementById("table"); var selectedGender = ''; var selectedLanguages = []; document.getElementById("display").addEventListener("click", function() { for(var i = 0; i < genderElem.length; i++) { if(genderElem[i].checked) selectedGender = genderElem[i].value; } for(var i = 0; i < languageElem.length; i++) { if(languageElem[i].checked) selectedLanguages.push(languageElem[i].value); } var newRow = tableElem.insertRow(-1); var newCell = newRow.insertCell(0); var newText = document.createTextNode(NameElem.value); newCell.appendChild(newText); newCell = newRow.insertCell(1); newText = document.createTextNode(selectedGender); newCell.appendChild(newText); newCell = newRow.insertCell(2); newText = document.createTextNode(ageElem.value); newCell.appendChild(newText); newCell = newRow.insertCell(3); newText = document.createTextNode(selectedLanguages.toString()); newCell.appendChild(newText); /*NameElem.value = ""; genderElem.value = ""; ageElem.value = ""; languageElem.value = ""; tableElem.value = "";*/ myForm.reset(); selectedGender = ""; selectedLanguages = []; }); })();

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div class="container"> <br> <br> <h3 class="text-center">Display answers of form fill in inside a table</h3> <br> <br> <form id="myForm"> <div class="form-group"> <label>First Name</label> <input id="name" class="form-control form-control-sm" /> </div> <div class="form-group"> <label>Age</label> <input id="age" class="form-control form-control-sm" /> </div> <div class="form-group"> Gender:<input type="radio" name="gender" id="male" value="Male"> <label for="male">Male</label> <input type="radio" name="gender" id="female" value="Female"> <label for="female">Female</label> </div> <div class="form-group"> <label>Language</label> <input type="checkbox" id="malayalam" name="language" value="Malayalam">Malayalam <input type="checkbox" id="english" name="language" value="English">English <input type="checkbox" id="hindi" name="language" value="Hindi">Hindi </div> <button type="button" id="display" class="btn btn-sm btn-primary">Display</button> </form> <br> <br> <table class="table border" id="table"> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> <th>Language</th> </tr> </table> <script type="text/javascript" src="form.js"></script> </div>