在我的CMS中,我有一个用于类别的复选框组。我希望在其下方添加一个文本输入框,让用户可以输入新类别的名称,并且可以动态地添加一个新的复选框,其中提供的名称用作值和标签。
我该如何实现这个功能?
我该如何实现这个功能?
<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>
在设计界面时需要考虑的一个因素是,在什么事件(当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
属性了。 - K Prime使用全局变量生成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>
appendTo
进行必要的调整。这不应该很棘手,但它与此处所要求的非常不同。你应该开始一个新的问题。确保让人们知道你已经尝试过什么。 - David Hedlundvar formCheck = $('<div/>', { 'class': 'form-check' }).appendTo(container);
,然后将输入和标签的附加目标从container
更改为formCheck
。请注意,您需要在class
周围添加引号,因为class
是javascript中的保留关键字。 - David Hedlund