javascript - 使用 jquery 删除更改​​时的复选框背景颜色

Question

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

这是 jsfiddle: demo

这是函数

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

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

我想在未选中时删除背景。

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

Answer 1

您可以遍历复选框来添加和删除背景类，如下所示

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

    ......  

});