Динамично создайте флажок с JQuery от ввода текста
В моем cms у меня есть группа флажков для категорий. Я хотел бы иметь ввод текста ниже, что, где пользователь может ввести название новой категории и оно динамично добавит новый флажок с обеспеченным именем, используемым и для значения и для маркировки.
Как я могу сделать это?
3 ответа
<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 бывает ...) Ознакомется ли новый флажок, добавляемый?
Скажем, есть кнопка рядом с текстовым ящиком. Когда кнопка нажала, значение TextBox превращается в новый флажок. Наша разметка может напоминать следующее ...
<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 может связываться с событием , нажмите пуговица кнопки и манипулировать DOM.
$('#addCheckbox').click(function() {
var text = $('#newCheckText').val();
$('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
});
Помещенный глобальная переменная для генерации идентификаторов.
<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>