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

【问题标题】：Dynamically create checkbox with JQuery from text input使用 JQuery 从文本输入动态创建复选框
【发布时间】：2010-01-13 08:58:29
【问题描述】：

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

我该怎么做？

【问题讨论】：

标签： jquery dynamic checkbox

【解决方案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>

【讨论】：

复选框被完美地创建（查看使用 firefox web 开发者扩展生成的源代码）但是一旦表单被提交并选中了新的复选框，它就不会显示在 post 变量中。 Safari 和 Firefox 的结果相同。有任何想法吗？因为我很难过。
在表格里面吗？我想你需要给复选框一个 name 我没有。
将我的头撞到墙上一个小时后，我将发布这个答案。基本上必须将表单打开标签移到打开的 div 元素上方。 stackoverflow.com/questions/445002/…
确实如此。这就是我的问题的意思是否在表格内 ;) 抱歉，如果不清楚。
@RobySottini：一种方法是定义var formCheck = $('<div/>', { 'class': 'form-check' }).appendTo(container);，然后将输入上的附加目标和标签从container 更改为formCheck。请注意，您需要在 class 周围加上引号，因为 class 是 javascript 中的保留关键字。

【解决方案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 />');
});

【讨论】：

我相信你忘了添加value属性

【解决方案3】：

放一个全局变量来生成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>

【讨论】：