views:

1319

answers:

3

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?

A: 

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 />');
});
T. Stone
I believe you forgot to add the `value` attribute
K Prime
+1  A: 
<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;

   var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
   container.append($(html));
}
</script>
David Hedlund
Brilliant. Does the job nicely. Many thanks for your assistance.
Martin Reeves
The check box gets created perfectly (looked at the generated source using firefox web developer extension) but once the form is submitted with the new checkbox checked it doesn't show in the post variable. Same result for both Safari and Firefox. Any ideas? as i'm stumped.
Martin Reeves
is it inside the form? i guess you'd need to give the checkboxes a `name` which i haven't.
David Hedlund
After an hour of banging my head against the wall I would this post which held the answer. Basically had to move the form open tag above the opening div element. http://stackoverflow.com/questions/445002/cloning-or-adding-an-input-to-a-form-in-jquery-does-not-submit-to-php-in-firefox
Martin Reeves
indeed. 'tis what i meant by my question *is it inside the form* ;) sorry if that was unclear.
David Hedlund
that'll teach me for some dodgy markup - thanks again for your help
Martin Reeves
A: 

Put a global variable to generate the ids.

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