如何使用JavaScript动态创建单行排列的复选框

代码不生效是两个核心错误导致的：

• 类绑定的元素不对：你静态实现里的checkbox-inline类是加在包裹复选框的<label>标签上的，给内部的<input>加类完全匹配不到已写的CSS规则，自然不会触发单行排布效果。
• 属性写法完全错误：class是独立的HTML属性，不能写到style属性内部。style属性只能写CSS样式规则，你把class定义塞到style里，浏览器会直接判定为无效内容忽略。

动态生成的DOM结构要和你静态编写的结构完全保持一致：每个复选框外层套一个带checkbox-inline类的label标签，再把input、选项文本放入label中，最后插入表单即可。

单个复选框动态生成示例 #

// 获取要插入选项的表单容器
const petForm = document.querySelector('form[role="form"]');

// 创建外层label，直接给label绑定样式类
const itemLabel = document.createElement('label');
itemLabel.className = 'checkbox-inline';

// 创建复选框input元素
const itemInput = document.createElement('input');
itemInput.type = 'checkbox';
itemInput.name = 'cbpets[]';
itemInput.value = 'Birds';

// 按照静态结构组装内容：复选框 + 选项文本 + 换行
itemLabel.append(itemInput);
itemLabel.append('Birds');
itemLabel.append(document.createElement('br'));

// 把组装好的完整选项插入表单
petForm.append(itemLabel);

批量生成多个复选框示例 #

如果需要一次性生成多个选项，直接遍历选项数组循环创建即可：

const petList = ['Birds', 'Rabbits', 'Hamsters', 'Goldfish'];
const petForm = document.querySelector('form[role="form"]');

petList.forEach(petName => {
  const itemLabel = document.createElement('label');
  itemLabel.className = 'checkbox-inline';

  const itemInput = document.createElement('input');
  itemInput.type = 'checkbox';
  itemInput.name = 'cbpets[]';
  itemInput.value = petName;

  itemLabel.append(itemInput);
  itemLabel.append(petName);
  itemLabel.append(document.createElement('br'));
  petForm.append(itemLabel);
})

如果你不需要每个选项文本后面强制加换行，直接去掉代码里创建<br>的部分即可，只要外层label保持inline-block的显示属性，复选框就会始终保持单行排布。

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