JavaScript动态创建DOM时如何获取checkbox的true/false选中值

你原有代码存在3处核心错误，修正后即可正确获取复选框的输入值：

• 选择器写法错误：querySelector获取ID元素必须加前缀#，且你原本选择的是label元素，并非目标复选框
• label绑定错误：htmlFor是label元素的属性，值需要对应关联复选框的ID字符串，不是DOM对象
• 取值逻辑错误：直接输出DOM对象到innerHTML只会显示[object HTMLInputElement]，需要通过DOM属性取实际值

修正后完整代码 #

// 动态创建DOM元素部分
var option = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('label')
var optionId = "option" + questionNumber + subquestionNumber;
var checkBoxId = "checkbox" + questionNumber + subquestionNumber;
var labelId = "label" + questionNumber + subquestionNumber;
var labelname = "name" + questionNumber + subquestionNumber;

// 基础属性配置
checkbox.type = "checkbox";
checkbox.value = 'Option ' + subquestionNumber; // 自定义复选框提交值
label.id = labelId;
label.name = labelname;
label.htmlFor = checkBoxId; // 修正label和复选框的关联关系
option.id = optionId;
option.className = "optionName";
checkbox.id = checkBoxId;

// 元素挂载
label.appendChild(document.createTextNode('Option ' + subquestionNumber));
option.appendChild(label);
option.appendChild(checkbox);
q.appendChild(option);

// 复选框取值逻辑
// 1. 加ID前缀#，通过复选框ID获取DOM
var targetCheckbox = document.querySelector('#' + checkBoxId);
// 2. 读取复选框状态和值：checked为布尔值代表是否选中，value为绑定的输入值
var checkboxes = {
  checked: targetCheckbox.checked,
  inputValue: targetCheckbox.value
};
// 3. 输出测试
document.getElementById("testingBox6").innerHTML = `是否选中：${checkboxes.checked}，输入值：${checkboxes.inputValue}`;

扩展提示 #

• 如果你需要获取同组多个复选框的选中值，可以给同组复选框设置相同的name属性，通过document.querySelectorAll('input[name="你的组name值"]:checked')获取所有选中项，遍历即可拿到所有选中值
• 动态创建的元素必须先插入到页面DOM树（也就是你写的q.appendChild(option)执行完成）后，才能通过选择器获取到，你原有代码的执行顺序是正确的

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