get checkbox state from dynamic element

Question

I'm using the YouTube API to populate a list of cards to my app using an each function. These cards are placed into a variable, then appended to a playlist container.

Within the individual cards is a switch to "favorite" a video. The switch, along with rest of the card is populated dynamically, so I'm trying to use the "on" "change", instead of ".change" "function". From what I've ready the on method is what you use to manipulate dynamic elements.

The challenge I'm running into is that I cannot seem to get the correct state of the switch(checkbox), and I'm always returning the first if statement no matter what I'm doing. Can anyone spot what I'm doing wrong here? The plan is to push to firebase if a user clicks to "favorite" a video, but I cannot get this function working. Thanks in advance! :D

$(document).on("change", ".switch", function () {
if (this.checked) {
  console.log("Checked");
} else {
  console.log("NOT Checked");
}
});

Assuming `.switch` is a class on one or more `input type="checkbox"` elements, then what you're doing is correct. `this` will refer to the element on which the `change` event was triggered, and so `this.checked` is that element's checked state. For us to be able to help you, you'll need to update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). — T.J. Crowder, Jan 13 '18 at 17:51
im not sure you should be using this.cheked you might want to check for this element attribute value — MadeInDreams, Jan 13 '18 at 17:54
@MadeInDreams why check the value? using `this.value` in the `if` condition will always return the value even if the `checkbox` isn't checked. Example [**JsFiddle**](https://jsfiddle.net/0we4aL9j/) this will check if the `checkbox` is `checked` and return the `ID`. [**JsFiddle**](https://jsfiddle.net/0we4aL9j/1/) — NewToJS, Jan 13 '18 at 18:00
If the element is dynamically inserted after the page load you have to refer to document.body see my answer here https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements/34937304#34937304 — MadeInDreams, Jan 13 '18 at 18:12
@MadeInDreams if the element is dynamically added then `$(document).on(` will take care of that so your answer isn't offering anything useful to what the OP isn't already using. — NewToJS, Jan 13 '18 at 18:23
may be there should be `$(this).checked` instead of `this.checked` !?? — E1mir, Jan 13 '18 at 18:45

score 0 · Accepted Answer · answered Jan 13 '18 at 18:43

Hey thanks so much for the responses everyone. I came up with the following that worked. It's been 2 days of trial and error, but this finally gives me what I'm looking for.

$(document).ready(function () {
$(document).on("change", ".switch", function (e) {
if (e.target.checked) {
  // code to run if checked
  console.log('Checked');
} else {
  //code to run if unchecked
  console.log('Unchecked');
}
});
// end document ready function
});

get checkbox state from dynamic element

1 Answers1