使用文本输入从JQuery动态创建复选框

Question

在我的cms中,我有一个类别的复选框组.我想有低于文本输入,用户可以输入一个新的类别的名称,它会动态地添加一个新的复选框与用于两个值和标签提供的名称.

我怎样才能做到这一点？

Answer 1

<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" />

<script type="text/javascript">
$(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);
}
</script>

Answer 2

设计界面时要考虑的元素之一是在什么事件（当A发生，B发生...）上添加了新复选框？

假设在文本框旁边有一个按钮。单击按钮后，文本框的值将变成一个新的复选框。我们的标记可能类似于以下内容...

<div id="checkboxes">
    <input type="checkbox" /> Some label<br />
    <input type="checkbox" /> Some other label<br />
</div>

<input type="text" id="newCheckText" /> <button id="addCheckbox">Add Checkbox</button>

基于此标记，您的jquery可以绑定到click按钮的事件并操纵DOM。

$('#addCheckbox').click(function() {
    var text = $('#newCheckText').val();
    $('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
});