trying to add a checkbox dynamically with jquery but nothing apepars

Question

Just trying to create a very basic to-do app and for whatever reason, my checkboxes are not showing up.

html:

<div class="todo-box">
    <input id="first-contact" type="text" placeholder="what do you have to do?"></input>
    <button>submit</button>
    <div id="list-section">
    </div>
</div>

and jquery:

$( document ).ready(function() {

$('button').on('click', function() {
    var a = $('#first-contact').val().toLowerCase();
    $('<p>').attr('class', 'list-item').append(a).appendTo('#list-section'); 
    $('<input>', {type: "checkbox"}).appendTo('#list-item');

    var pAmount = $('#list-section').children().length;
    if (pAmount > 6) {
        $('#list-section p').last().remove();
    }

});

});

Where is your p element? Are you wanting to create a new <p> with the checkbox in it? — Radmation
– Radmation, Commented Jul 8, 2016 at 22:45

cFreed · Accepted Answer · 2016-07-15 20:17:31Z

3

You have 2 issues in $('<input>', {type: "checkbox"}).appendTo('#list-item');:

you're using {type: "checkbox"} at the place where jQuery $() expects a domain argument: you must build a complete element in first argument instead
you're appending the element to a list-item id while you created it as a class

This will work:

$( document ).ready(function() {

$('button').on('click', function() {
    var a = $('#first-contact').val().toLowerCase();
    $('<p>').attr('class', 'list-item').append(a).appendTo('#list-section'); 
    $('<input type="checkbox">').appendTo('.list-item:last');

    var pAmount = $('#list-section').children().length;
    if (pAmount > 6) {
        $('#list-section p').last().remove();
    }

});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todo-box">
    <input id="first-contact" type="text" placeholder="what do you have to do?"></input>
    <button>submit</button>
    <div id="list-section">
    </div>
</div>

EDIT: modified in response to the OP's comment : added :last modifier to make checkbox added to the just newly created item only.

edited Jul 15, 2016 at 20:17

answered Jul 8, 2016 at 22:55

cFreed

4,4641 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kmgiffin Over a year ago

thank you so much! this did fix my issue, but now I have another one. Every time a todo is added, a new checkbox appears, for EVERY todo. So If I have two todos the original one will now have two checkboxes and the new one I added will have one...until I add another todo. Then the original will have three, the last one will have two, and my new todo will have one. How do I limit the checkboxes?

cFreed Over a year ago

@kmgiffin You're right. Didn't pay attention to that! Now corrected: look at my modified code.

Radmation · Accepted Answer · 2016-07-08 22:49:44Z

1

I think this is what you are going for?

$('button').on('click', function() {

    var a = $('#first-contact').val().toLowerCase();

   // update here
    $('#list-section').append("<p><input type='checkbox' value='"+a+"'></p>");

    var pAmount = $('#list-section').children().length;
    if (pAmount > 6) {
        $('#list-section p').last().remove();
    }

});

answered Jul 8, 2016 at 22:49

Radmation

1,5441 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

trying to add a checkbox dynamically with jquery but nothing apepars

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related