Dynamically create checkbox with JQuery from text input

Question

In my cms I have a checkbox group for categories  I would like to have a text input below that where the user can input the name of a new category and it will dynamically add a new checkbox with the provided name used for both the value and the label   How can I do this

User · Answer

One of the elements to consider as you design your interface is on what event (when A takes place, B happens...) does the new checkbox end up being added?

Let's say there is a button next to the text box. When the button is clicked the value of the textbox is turned into a new checkbox. Our markup could resemble the following...

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

Based on this markup your jquery could bind to the click event of the button and manipulate the DOM.

$('#addCheckbox').click(function() {
    var text = $('#newCheckText').val();
    $('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
});

User · Answer

Put a global variable to generate the ids    lt script gt        function               Variable to get ids for the checkboxes         var idCounter 1              btn1   click function                var val       txtAdd   val                    divContainer   append     lt label for  chk     idCounter      gt     val     lt  label gt  lt input id  chk     idCounter      type  checkbox  value      val        gt                  idCounter                          lt  script gt   lt div id  divContainer  gt  lt  div gt   lt input type  text  id  txtAdd    gt    lt button id  btn1  gt Click lt  button gt

User · Answer

lt div id  cblist  gt       lt input type  checkbox  value  first checkbox  id  cb1    gt   lt label for  cb1  gt first checkbox lt  label gt   lt  div gt    lt input type  text  id  txtName    gt   lt input type  button  value  ok  id  btnSave    gt    lt script type  text javascript  gt    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          lt input   gt      type   checkbox   id   cb  id  value  name    appendTo container          lt label   gt       for    cb  id  text  name    appendTo container      lt  script gt

[jquery] Dynamically create checkbox with JQuery from text input

Examples related to jquery

Examples related to dynamic

Examples related to checkbox