Finding value of checkbox in dynamically created element

Question

So, I'm writing some JS which dynamically creates some DOM elements. Below is a structure of the elements created:

<div class='list_item' key='1'>
    <p>Hello, World!</p>
</div>

<div class='cont' key='1'>
    <input type='checkbox' name='test'/>
</div>

When an event is triggered, I want to loop through all .list_item, and find their corresponding .cont, using the key attribute as an identifier. I want to find the value of the .cont > input[type="checkbox"].

Here's my code so far:

$('.list_item').each(function() {
    var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
    console.log(x);
});

Instead of getting a true or false response, my code throws undefined as its result. What can I do to my code to get the response I want (the value of the checkbox)?

Thanks

here: var x = $('cont you missed a dot.

Banzay
– Banzay

2016-12-31 14:30:49 +00:00
Commented Dec 31, 2016 at 14:30 — Banzay
– Banzay, Commented Dec 31, 2016 at 14:30

T.J. Crowder · Accepted Answer · 2016-12-31 14:31:44Z

Two problems:

You forgot to close the attribute selector
You forgot the . before cont in the class selector

So:

$('.list_item').each(function() {
    var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
// ------------^--------------------------------------^
    console.log(x);
});

Note that you can do that with a single selector rather than find:

$('.list_item').each(function() {
    var x = $('.cont[key="' + $(this).attr('key') + '"] input[type="checkbox"]').prop('checked');
    console.log(x);
});

Example:

$('.list_item').each(function() {
  var x = $('.cont[key="' + $(this).attr('key') + '"] input[type="checkbox"]').prop('checked');
  console.log(x);
});

<div class='list_item' key='1'>
  <p>Hello, World!</p>
</div>

<div class='cont' key='1'>
  <input type='checkbox' name='test' />
</div>

<div class='list_item' key='2'>
  <p>Hello, World!</p>
</div>

<div class='cont' key='2'>
  <input type='checkbox' name='test' />
</div>

<div class='list_item' key='3'>
  <p>Hello, World!</p>
</div>

<div class='cont' key='3'>
  <input type='checkbox' name='test' checked/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hristo Eftimov · Accepted Answer · 2016-12-31 14:30:50Z

1

I see that your selector is wrong. The class dot is missing. Try with this:

$('.cont[key="' + $(this).attr('key') + '"')

answered Dec 31, 2016 at 14:30

Hristo Eftimov

16.3k14 gold badges55 silver badges80 bronze badges

1 Comment

T.J. Crowder Over a year ago

That's half the problem, yes. :-)

mukesh kudi · Accepted Answer · 2016-12-31 14:34:11Z

1

you just missed '.' before class selector

$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
console.log(x);
});

edited Dec 31, 2016 at 14:34

answered Dec 31, 2016 at 14:30

mukesh kudi

7296 silver badges20 bronze badges

1 Comment

T.J. Crowder Over a year ago

That's half the problem, yes. :-)

Collectives™ on Stack Overflow

Finding value of checkbox in dynamically created element

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest