Dynamicznie Utwórz pole wyboru z jQuery z wprowadzania tekstu

W moim cms mam grupę checkbox dla kategorii. Chciałbym mieć wpis tekstowy poniżej, gdzie użytkownik może wprowadzić nazwę nowej kategorii i dynamicznie dodać nowe pole wyboru z podaną nazwą używaną zarówno dla wartości, jak i etykiety.

Jak mogę to zrobić?

Author: Martin Reeves, 2010-01-13
Source

3 answers

<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>
 73
Author: David Hedlund,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-13 09:19:52

Jednym z elementów, które należy wziąć pod uwagę podczas projektowania interfejsu, jest to, jakie zdarzenie (gdy A ma miejsce, B się dzieje...) czy nowe pole wyboru zostanie dodane?

Załóżmy, że obok pola tekstowego znajduje się przycisk. Po kliknięciu przycisku wartość pola tekstowego zostanie zamieniona na nowe pole wyboru. Nasze znaczniki mogą wyglądać następująco...

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

Na podstawie tego znacznika Twój jquery może powiązać się ze zdarzeniem click przycisku i manipulować DOM.

$('#addCheckbox').click(function() {
    var text = $('#newCheckText').val();
    $('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
});
 4
Author: T. Stone,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-13 09:05:10

Umieść zmienną globalną do generowania identyfikatorów.

<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>
 3
Author: rahul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-13 09:12:09