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

Question

在我的CMS中，我有一个用于类别的复选框组。我希望在其下方添加一个文本输入框，让用户可以输入新类别的名称，并且可以动态地添加一个新的复选框，其中提供的名称用作值和标签。

我该如何实现这个功能？

- Martin Reeves

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>

- David Hedlund

---

@David，如何在行中创建最多10个复选框，在列中创建5个复选框。当行中达到10个复选框时，下一个复选框应从下一列开始。 - Manikandan

@Manikandan：好的，你需要计算已添加的元素，并在当前行已满时对appendTo进行必要的调整。这不应该很棘手，但它与此处所要求的非常不同。你应该开始一个新的问题。确保让人们知道你已经尝试过什么。 - David Hedlund

@David，你的代码已经对我起作用了，我只是想通过限制复选框来进行一些小修改，正如我在之前的评论中提到的那样。谢谢。我也会像你说的那样尝试。如果您有任何建议，请务必评论。 - Manikandan

我该如何使用这种简便的方式在<input>和<label>周围添加<div class="form-check">？ - Roby Sottini

@RobySottini：一种方法是定义var formCheck = $('<div/>', { 'class': 'form-check' }).appendTo(container);，然后将输入和标签的附加目标从container更改为formCheck。请注意，您需要在class周围添加引号，因为class是javascript中的保留关键字。 - David Hedlund

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

- T. Stone

---

我相信你忘记添加 value 属性了。 - K Prime

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

- rahul