Question

当我创建复选框时，我希望它们以垂直方式列出，而不是水平列出。我怎么能这样做？

HTML：

  <div id="cblist">
        <input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
    </div>

    <input type="text" id="txtName" />
    <input type="button" value="ok" id="btnSave" />

Jquery的：

$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
    });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
}

Answer 1

包括以下一行：

$('<br/>').appendTo(container);

在脚本的末尾。

Answer 2

这是HTML，所以你有很多选择。例如：

制作一个列表元素，并将每个复选框放在<li>
在每个标签后附加<br>

Answer 3

使用表格添加复选框，每个复选框位于单列的每一行。

Answer 4

将复选框放在lable中，并提供标签display:block。

Answer 5

请勿使用<br>代码或表格...

制作干净的HTML：

<div class="formGroup">
  <input id="1" type="checkbox" />
  <label>your label</label>
</div>

<div class="formGroup">
  <input id="2" type="checkbox" />
  <label>your label</label>
</div>

使用css，您可以将formGroup显示为Block-Elements ...

祝你好运

如何以垂直方式列出CheckBoxes？

5 个答案: