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

在我的cms中，我有一个类别复选框组。我想有一个文本输入下面，用户可以输入一个新类别的名称，它将动态添加一个新的复选框与提供的名称都用于价值和标签

---

我如何做到这一点？

< P>当你设计你的界面时要考虑的因素之一是什么事件（当发生，B发生……）新的复选框最终被添加了吗？< /P> 假设文本框旁边有一个按钮。单击按钮时，文本框的值将变成一个新的复选框。我们的标记可能类似于以下内容

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

第一个复选框
$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（$（'#txtName'）.val（））；
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$（''，{type:'checkbox'，id:'cb'+id，value:name}）；
$（“”，{'for'：'cb'+id，text:name}）；
}

放置一个全局变量以生成ID

<script>
    $(function(){
        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn1").click(function(){
            var val = $("#txtAdd").val();
            $("#divContainer").append ( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );
            idCounter ++;
        });
    });
</script>
<div id='divContainer'></div>
<input type="text" id="txtAdd" /> 
<button id="btn1">Click</button>

$（函数（）{
//变量以获取复选框的ID
var-idCounter=1；
$（“#btn1”）。单击（函数（）{
var val=$（“#txtAdd”）.val（）；
$（“#divContainer”）.append（“+val+”）；
idCounter++；
});
});
点击

我相信您忘记添加

值

属性该复选框创建得非常完美（使用firefox web developer extension查看生成的源代码），但一旦表单提交时选中了新复选框，它就不会显示在post变量中。Safari和Firefox的结果相同。有什么想法吗？我被难住了，它在表格里吗？我想你需要给复选框一个我没有的

名称

。在我的头撞到墙上一个小时后，我将看到这篇包含答案的帖子。基本上必须将表单open标记移到open div元素上方。的确如此。”这就是我的问题的意思，它是否在表格中；）如果不清楚的话，很抱歉。@RobySottini:一种方法是定义

var formCheck=$（“”，{'class'：'formCheck'}）

然后将输入和标签上的追加目标从

container

更改为

formCheck

。请注意，您需要在

class

周围加引号，因为class在javascript中是一个保留关键字。

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

<script>
    $(function(){
        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn1").click(function(){
            var val = $("#txtAdd").val();
            $("#divContainer").append ( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );
            idCounter ++;
        });
    });
</script>
<div id='divContainer'></div>
<input type="text" id="txtAdd" /> 
<button id="btn1">Click</button>