Javascript 使用jquery删除更改时的复选框背景色

我有一个简单的测验，用户可以回答多个问题，现在当用户选中这个复选框时，我正在添加一个类作为背景

以下是JSFIDLE：

这里是函数

    // 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");
      }
    });

现在，当用户选中另一个复选框时，另一个复选框被取消选中，但背景仍然存在\

我想取消选中时删除背景

---

我需要更改什么才能使其正常工作？

您可以通过复选框反复添加和删除背景类，如下所示

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");
               }
    });  

    ......  

});

---

它在你的小提琴上很好用link@Utkarsh未选中框周围的蓝色突出显示仍在小提琴中为我显示。OP，我会考虑改变你的方法。您可以使用@Utkarsh完全在CSS中实现这一点。仍然有一个蓝色的背景显示，这是我的问题。目前的代码非常混乱。您正在根据：checked属性或类前输入为复选框设置样式。现在试着统一它，使勾号和背景都成为同一个“状态”，然后选择是类还是：选中状态。避免两者混用。@WojciechDynus这就是我需要帮助的原因，我是斯图克没问题。。很乐意帮忙：