CODEWITHSUNDEEP
javascriptjquery
Reynier
Reynier

Reputation: 2478

Show div and create elements any time a checkbox is checked

I'm trying to show div#options_holder and create some elements inside it by using this code:

var counter = 1;

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('id');
    var isChecked = $(this).prop("checked");
    var input, button, append = "";

    $("#options_holder").show();

    input = capitalize(theName) + '<input name="input_' + theName + '[]" id="' + theID + '" value="" placeholder="' + capitalize(theName) + '" />';
    button = '<button type="button" class="add-size">Nuevo ' + capitalize(theName) + '</button>';

    append = counter === 1 ? input += button : input;

    $("#options_holder").append(append);
    counter++;

    console.log("You changed " + theName + ", with an id of " + theID + ", its checked property is: " + isChecked);
});

But it does not work since div#options_holder remains hidden and elements aren't created, is something wrong? It's supposed that those should happen any time I mark a checkbox, if I unmark in the other hand the process should be reverted meanind div#options_holder will be hidden and any element inside it should be destroyed, what's wrong?

Upvotes: 0

Views: 97

Answers (1)

IvanL
IvanL

Reputation: 2485

Making sure that your selectors work and your IDs are correct are often easily overlooked. Glad we could help you find your typing mistake :-)

Working code fiddle: http://jsfiddle.net/pXJpr/

HTML:

<div id="choices">
    <input type="checkbox" name="testName" id="testId" />
</div>
<div id="options_holder" style="display:none;">
</div>

JS:

var counter = 1;

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('id');
    var isChecked = $(this).prop("checked");
    var input, button, append = "";

    $("#options_holder").show();

    input = capitalize(theName) + '<input name="input_' + theName + '[]" id="' + theID + '" value="" placeholder="' + capitalize(theName) + '" />';
    button = '<button type="button" class="add-size">Nuevo ' + capitalize(theName) + '</button>';

    append = counter === 1 ? input += button : input;

    $("#options_holder").append(append);
    counter++;

    console.log("You changed " + theName + ", with an id of " + theID + ", its checked property is: " + isChecked);
});

function capitalize(s) {
    return s;
}

Upvotes: 1

Related Questions