如何以垂直方式列出CheckBoxes？

當我創建複選框時，我希望它們以垂直方式列出，而不是水平。我怎麼能做到這一點？如何以垂直方式列出CheckBoxes？

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); 
}

來源

2014-03-06 AdiT

包括以下行：

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

在腳本的結尾。

來源

2014-03-06 09:38:50 kcak11

這是HTML，所以你有很多的選擇。例如：

做一個列表元素，並把每個複選框在<li>
附加一個<br>每個標籤

來源

2014-03-06 09:38:20 Jon

後使用表中添加複選框，每個複選框單一的每一行中柱。

來源

2014-03-06 09:38:34 user3307717

將複選框放在lable中，並給出標記display:block。

來源

2014-03-06 09:41:16

不要使用<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顯示爲塊的元素...

好運氣

來源

2014-03-06 09:43:19

用戶請求垂直顯示覆選框的幫助，因此重用現有代碼將是最簡單的方法。即在現有的javascript中添加'
'可能是實現他想要的最簡單的方法。 – kcak11

當然，但他將新輸入添加到一個現有的div中。在我看來，更好更乾淨的方法是追加分組輸入和標籤。所以他們是垂直的，你有乾淨的HTML ... –

如何以垂直方式列出CheckBoxes？

回答

相關問題