Динамически создать флажок с JQuery из ввода текста - PullRequest
Новая
       21

Динамически создать флажок с JQuery из ввода текста

30 голосов
/ 13 января 2010

В моем cms у меня есть группа флажков для категорий. Я хотел бы, чтобы текст был введен ниже, где пользователь может ввести имя новой категории, и он будет динамически добавлять новый флажок с предоставленным именем, используемым как для значения, так и для метки.

Как я могу это сделать?

Ответы [ 3 ]

76 голосов
/ 13 января 2010 
<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>
4 голосов
/ 13 января 2010

Один из элементов, который следует учитывать при разработке интерфейса, - о каком событии (когда происходит 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 />');
});
3 голосов
/ 13 января 2010

Поместите глобальную переменную для генерации идентификаторов. 

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