Изменить Флажок + метка JQuery

Question

Я получил несколько флажков и этикетки и когда ответ правильный, я хочу, чтобы изменить цвет фона выбранного флажком и маркировать

<input type="checkbox" id="a" class="check-with-label" /> 
<label for="a" class="question_box"> 
    <?php echo $vraag[0]['A'] ?> 
</label> 

<input type="checkbox" id="b" class="check-with-label" /> 
<label for="b" class="question_box"> 
    <?php echo $vraag[0]['B'] ?> 
</label> 

и когда пользователь пресса посылает ему вызов ajax call в скрипт, чтобы проверить, является ли он правильным ответом или нет.

$('#bottom').on('click', function(){ 
    $('#antwoorden input:checked').each(function() { 
     var selected = $(this).attr('id'); 
     //var selected_box = this; 
     selected = selected.toUpperCase(); 

     var data = { 
      vraag_nummer : <?php echo $vraag[0]['id'] ?>, 
      antwoord  : selected 
     }; 

     console.log(data); 
     $.ajax({ 
      type: 'POST', 
      url : 'includes/check_correct.php', 
      data: data, 
      success: function(data) { 
       if(data.correct){ 
        this.css('background-color', 'green'); 
        //selected_box.css('background-color', 'green'); 
       } else { 
        this.css('background-color', 'red'); 
       } 
      }, 
      error: function(err) { 
       console.log('error'); 
       console.log(err); 
      } 
     }); 
    }); 
}); 

проблема, я не знаю, как назвать правильную форму, потому что, когда пользователь нажимает представить переменную this теперь кнопку и не проверенного окна представить (Там может быть только один установлен флажок в time_.

Таким образом, вопрос, как я могу заменить цвет фона выбранного и правильный ящик из

.check-with-label:checked + .question_box { 
    background-color: orange; 
} 

в

background-color:green 

(и некорректного red)

Answer 1

Попробуйте изменить label вместо this

Вы уже получили ID этикетки

(var selected = $(this).attr('id');)

Который, вероятно, возвращающие/b/c/d, а затем использовать

$('label[for="'+selected+'"]').css('background-color', 'green'); //or red in the else statement

этот стили в метку для выбранного идентификатора, в данном случае г код выше основно означает:

$('label][for="d"].css('background-color','green'); //or red

, но затем с помощью выбранной переменной

Goodluck!

Answer 2

в успехе использования selected_obj.css вместо this.selected и передать $ (это) в selected_obj

$('#bottom').on('click', function(){ 
    $('#antwoorden input:checked').each(function() { 
     var selected = $(this).attr('id'); 
     var selected_obj = $(this); 
     //var selected_box = this; 
     selected = selected.toUpperCase(); 

     var data = { 
      vraag_nummer : <?php echo $vraag[0]['id'] ?>, 
      antwoord  : selected 
     }; 

     console.log(data); 
     $.ajax({ 
      type: 'POST', 
      url : 'includes/check_correct.php', 
      data: data, 
      success: function(data) { 
       if(data.correct){ 
        selected_obj.css('background-color', 'green'); 
        //selected_box.css('background-color', 'green'); 
       } else { 
        selected_obj.css('background-color', 'red'); 
       } 
      }, 
      error: function(err) { 
       console.log('error'); 
       console.log(err); 
      } 
     }); 
    }); 
}); 

Answer 3

Try это

$('#bottom').on('click', function(){ 
    $('#antwoorden .check-with-label').each(function() { 
     var selected = $(this).attr('id'); 
     var isChecked = $(this).is(':checked')); 
     if (!isChecked) { 
      return; 
     } 
     var selected_obj = $(this); 
     //var selected_box = this; 
     selected = selected.toUpperCase(); 

     var data = { 
      vraag_nummer : <?php echo $vraag[0]['id'] ?>, 
      antwoord  : selected 
     }; 

     console.log(data); 
     $.ajax({ 
      type: 'POST', 
      url : 'includes/check_correct.php', 
      data: data, 
      success: function(data) { 
       if(data.correct){ 
        selected_obj.css('background-color', 'green'); 
       } else { 
        selected_obj.css('background-color', 'red'); 
       } 
      }, 
      error: function(err) { 
       console.log('error'); 
       console.log(err); 
      } 
     }); 
    }); 
}); 

Answer 4

После того, как страница отображается и отображается пользователю, PHP больше не будет работать. Поэтому в вашей функции $('#bottom').on('click' код PHP не будет работать. Хитрость заключается в том, чтобы хранить эту информацию при создании страницы, например, записывая ее в атрибут данных или некоторые из них.

Внутри функции успеха AJAX объект $(this) недоступен. Установите его в глобальную переменную, и вы сможете получить доступ к значению.

/* javascript/jQuery */ 
 
$('#bottom').on('click', function(){ 
 
    $('#antwoorden input:checked').each(function() { 
 
     var selected = this.id; //faster, same result 
 
     $this = $(this); 
 
     selected = selected.toUpperCase(); 
 

 
     var data = { 
 
      //change next line - PHP finished running 
 
      vraag_nummer : $this.attr('data-vn'), 
 
      antwoord  : selected 
 
     }; 
 

 
     console.log(data); 
 
     $.ajax({ 
 
      type: 'POST', 
 
      url : 'includes/check_correct.php', 
 
      data: data, 
 
      success: function(data) { 
 
       if(data.correct){ 
 
        $this.css('background-color', 'green'); 
 
       } else { 
 
        $this.css('background-color', 'red'); 
 
       } 
 
      }, 
 
      error: function(err) { 
 
       console.log('error'); 
 
       console.log(err); 
 
      } 
 
     }); 
 
    }); 
 
});

<!-- HTML: --> 
 
<input id="vraag_nummer" data-vn="<?php echo $vraag[0]['id'] ?>" type="text" />