Remove checkbox background color on change using jquery

Question

I have a simple quiz in which user can answer multiple questions, now when the user checks the box I am adding a class for the background.

Here is jsfiddle:demo

Here is function

    // here we add event handler for newly created checkboxes.
    nextQuestion.find("input[type='checkbox']").on('change', function () {

      if ($(this).is(":checked")) {

        //add checkbox background when is checked
        $(this).addClass("input-before");

        //uncheck the checkbox if another checkbox is checked
        $('#next').prop("disabled", false);
        $('input.cb').not(this).prop('checked', false, function(){
          //remove the background ...this is not working
          $(this).removeClass("input-before");
        })

      } else {
        $('#next').prop("disabled", true);
        $(this).removeClass("input-before");
      }
    });

Now when user check another checkbox the other checkbox is unchecked but the background is still there\

I want to remove the background when Unchecked.

what do I need to change to get this working?

@Utkarsh The blue highlight around the unchecked box is still showing in the fiddle for me. OP, I'd consider changing your approach to this. You can do this entirely in CSS using the checked selector — Someone
– Someone, Commented Dec 13, 2019 at 14:32
@Utkarsh there is still a blue background showing, that is my problem — The Dead Man
– The Dead Man, Commented Dec 13, 2019 at 14:34
The code at the moment is quite messy. You are giving styling to the checkbox according to :checked property or "input-before" class. Try to unify this for now to have both - the tick and the background for the same 'state' and choose if you want this to be a class or a :checked state. Avoid mixing both of them. — Wojciech Dynus
– Wojciech Dynus, Commented Dec 13, 2019 at 14:38

Ajith · Accepted Answer · 2019-12-13 14:45:16Z

1

You can iterate through checkbox to add and remove the background class as given below

nextQuestion.find("input[type='checkbox']").on('change', function () {
    .....

    $("input[type='checkbox']").each(function () {
               if (this.checked) {
                    $(this).addClass("input-before");
               }else{
                     $(this).removeClass("input-before");
               }
    });  

    ......  

});

answered Dec 13, 2019 at 14:45

Ajith

2,6784 gold badges21 silver badges43 bronze badges

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

1 Comment

Ajith Over a year ago

No problem.. happy to help :)

Collectives™ on Stack Overflow

Remove checkbox background color on change using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related