使用 Javascript 在一行中创建复选框答案

【问题标题】：Create Checkboxes, in a single row, with Javascript使用 Javascript 在一行中创建复选框
【发布时间】：2022-06-16 23:14:02
【问题描述】：

我正在尝试构建一个动态创建一行复选框的简单网页。首先，我想出了如何将复选框放在一行中：

<style>
  .checkbox-inline{
    display: inline-block;
  }
</style>

<form role = "form"  method = "post">
  <legend>What is Your Favorite Pet?</legend>  
  <label class="checkbox-inline"><input type="checkbox" name="cbpets[]" value="Cats">Cats<br></label>
  <label class="checkbox-inline"><input type="checkbox" name="cbpets[]" value="Dogs">Dogs<br></label>
</form>

接下来，我找到了这个页面StackOverflow question（见第一个答案）并且能够创建复选框，但跨越多行。现在我被困住了。我试图将复选框放在一行中，但还没有弄清楚如何。我尝试添加（使用stackoverflow答案中的语法）

var color=document.createElement("input");   
color.setAttribute(
  'style',
  'class="checkbox-inline"',
);

但这没有用。您还有什么可以建议我尝试的吗？

【问题讨论】：

如果你想在一行中添加复选框，那么那些<br> 元素是干什么用的？

标签： javascript checkbox

【解决方案1】：

您不需要使用display: inline-block; 来强制将所有复选框放在一行中。只需删除label 中的<br> 标签，然后所有复选框将显示在一行中。

<form role="form" method="post">
  <legend>What is Your Favorite Pet?</legend>
  <label class="checkbox-inline"><input type="checkbox" name="cbpets[]" value="Cats">Cats</label>
  <label class="checkbox-inline"><input type="checkbox" name="cbpets[]" value="Dogs">Dogs</label>
</form>

【讨论】：