CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
The Dead Man
The Dead Man

Reputation: 5566

Fire on change event in each checkbox when its checked

I have a simple quiz in which user can answer multiple questions by clicking next, now I want to change the checkbox background when the checkbox is checked

Here is a demo quiz demo

Here is what I have tried

A function to change the background color when checkbox is checked 

$("input[type='checkbox']").on('change', function(){
      console.log('clicked');
      if($(this).is(":checked")){
        console.log('Chodzi')
          $(this).addClass("input-before"); 
      }
      else{
        console.log('Nie chodzi');
          $(this).removeClass("input-before");  
      } });

Now when I run my app and click the checkboxes, the checkboxes change the background, but when I click next and then click the checkboxes the background is not changing.

What do I need to change to get this working??

Upvotes: 1

Views: 115

Answers (2)

Eldar
Eldar

Reputation: 10790

Well the problem is you are creating elements on the fly. But you code only attach event handlers to existing ones. What you need to is add event handler when you create new element so your code should be like this:

 function displayNext() {
    quiz.fadeOut(function() {
      $('#question').remove();

      if (questionCounter < questions.length) {
        var nextQuestion = createQuestionElement(questionCounter);
        // here we add event handler for newly created checkboxes.
        nextQuestion.find("input[type='checkbox']").on('change', function() {
          console.log('clicked');
          if ($(this).is(":checked")) {
            console.log('Chodzi')
            $(this).addClass("input-before");
          } else {
            console.log('Nie chodzi');
            $(this).removeClass("input-before");
          }
        });
        quiz.append(nextQuestion).fadeIn();
        if (!(isNaN(selections[questionCounter]))) {
          $('input[value=' + selections[questionCounter] + ']').prop('checked', true);
        }

        // Controls display of 'prev' button
        if (questionCounter === 1) {
          $('#prev').show();
        } else if (questionCounter === 0) {

          $('#prev').hide();
          $('#next').show();
        }
      } else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }

Working fiddle

Upvotes: 1

Plastic
Plastic

Reputation: 10318

I believe the solution is easy, to add a listener to some dynamically added element you just have to use JQuery like this:

  $("section").on('change',"input[type='checkbox']", function(){
      console.log('clicked');
      if($(this).is(":checked")){
         console.log('Chodzi')
         $(this).addClass("input-before"); 
      }
      else {
         console.log('Nie chodzi');
         $(this).removeClass("input-before");  
      } 
  });

Here is your fiddle updated with my edit

So basically you have to add the listener to the container, it will "propagate" the listener to every input[type='checkbox'] that is (or will be) its children.

Upvotes: 1

Related Questions