如何使用JavaScript在表格中显示单选框与复选框的选中值

• id 属性在 HTML 中要求全局唯一，你给多组性别单选框、语言复选框都设置了相同的gender、language id，document.getElementById()只能匹配到第一个符合条件的元素，因此永远只能取到第一个选项的值
• 同组单选框必须设置相同的name属性才能实现互斥选中，原有代码中性别单选框的name分别为male、female，本身单选互斥逻辑也存在问题

1. 修改HTML代码 #

主要调整单选、复选框的id和name属性，避免重复id，统一同组单选的name：

<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">表单填写内容表格展示</h3>
  <br>
  <br>
  <form>
    <div class="form-group">
      <label>姓名</label>
      <input id="name" class="form-control form-control-sm" />
    </div>

    <div class="form-group">
      <label>年龄</label>
      <input id="age" class="form-control form-control-sm" />
    </div>

    <div class="form-group">
      性别:
      <input type="radio" name="gender" value="male"> 男
      <input type="radio" name="gender" value="female"> 女
    </div>

    <div class="form-group">
      <label>掌握语言</label>
      <input type="checkbox" class="language-checkbox" value="Malayalam"> 马拉雅拉姆语
      <input type="checkbox" class="language-checkbox" value="English"> 英语
      <input type="checkbox" class="language-checkbox" value="Hindi"> 印地语
    </div>
    <button type="button" id="display" class="btn btn-sm btn-primary">展示</button>
  </form>

  <br>
  <br>

  <table class="table border" id="table">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>掌握语言</th>
    </tr>
  </table>

  <script type="text/javascript" src="form.js"></script>
</div>

2. 修改JS代码 #

调整单选、复选框的取值逻辑和重置逻辑：

(function setup() {
  "use strict";

  var NameElem = document.getElementById("name");
  var ageElem = document.getElementById("age");
  var tableElem = document.getElementById("table");
  document.getElementById("display").addEventListener("click", function() {
    // 取选中的性别
    const checkedGender = document.querySelector('input[name="gender"]:checked');
    const genderValue = checkedGender ? checkedGender.value : '';
    // 取所有选中的语言，拼接为顿号分隔的字符串
    const checkedLanguages = document.querySelectorAll('.language-checkbox:checked');
    const languageValue = Array.from(checkedLanguages).map(item => item.value).join('、');

    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(genderValue);
    newCell.appendChild(newText);
    // 年龄列
    newCell = newRow.insertCell(2);
    newText = document.createTextNode(ageElem.value);
    newCell.appendChild(newText);
    // 语言列
    newCell = newRow.insertCell(3);
    newText = document.createTextNode(languageValue);
    newCell.appendChild(newText);

    // 重置表单
    NameElem.value = "";
    ageElem.value = "";
    // 重置单选框
    document.querySelectorAll('input[name="gender"]').forEach(item => item.checked = false);
    // 重置复选框
    document.querySelectorAll('.language-checkbox').forEach(item => item.checked = false);
  });
})();

内容的提问来源于stack exchange，提问作者Ranjitha Sanker