javascript - 在复选框按钮选项列表上应用 css 规则

Question

我有一个包含元素列表的对象。我想将它们显示为复选框按钮。我正在使用以下代码片段来生成单选按钮。他们工作正常。

for (var i = 0; i < mObject.removeList.length; i++) {
    //Todo add logic of checkbox here
    var lineBreak = "";
    if ((i+1) % 3 == 0)
    {
        lineBreak = "<br />";
    }

    $('#' + listsDiv + 'RemoveList').append('<input type="checkbox" name="' + mObject.removeList[i].ItemName + '" value="' + mObject.removeList[i].ItemName + '" />' + mObject.removeList[i].ItemName + lineBreak);
}

问题是我想每行显示 3 个并均匀分布在一行中。我已经设法将它们分成三行，但我无法理解让它们每行都设置为三列的样式。如果我使用 css 在复选框上添加 margin-right，由于复选框文本的长度，它们会被分开但不会在列中均匀对齐。

我希望找到一个 CSS 解决方案，使它们显示在 3 列的行中，并将每个复选框对齐到各自列的左侧。

列表中的项数未知。

目前，此 css 未提供所需的输出。

input[type="radio"], input[type="checkbox"] {
    margin-left:25px;
}

Answer 1

实现此目的的最简单方法是将所有复选框包装在 label 元素中。然后，您可以将 width: 33% 应用于这些标签，它们将自动填充任何容器中的三行。

使用 label 元素的另一个优点是它们增加了复选框的点击区域，因此您现在可以单击与输入关联的文本来检查它。

试试这个:

var mObject = {
  removeList: [
      { ItemName: 'Foo1' },
      { ItemName: 'Foo2' },
      { ItemName: 'Foo3' },
      { ItemName: 'Foo4' },
      { ItemName: 'Foo5' },
      { ItemName: 'Foo6' },
      { ItemName: 'Foo7' },
      { ItemName: 'Foo8' }
    ]
}

for (var i = 0; i < mObject.removeList.length; i++) {
    var itemName = mObject.removeList[i].ItemName;
    // Note the <label> wrapper here...
    $('#RemoveList').append('<label><input type="checkbox" name="' + itemName + '" value="' + itemName + '" />' + itemName + '</label>');
}

label {
    display: inline-block;
    width: 33%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="RemoveList"></div>

如果您能够针对支持 ES2015 的浏览器，您还可以通过使用 forEach() 来简化循环，如下所示:

mObject.removeList.forEach(function(o) {
    var itemName = o.ItemName;
    $('#RemoveList').append('<label><input type="checkbox" name="' + itemName + '" value="' + itemName + '" />' + itemName + '</label>');
})