在jQuery中更改多个标签的背景颜色

Question

After answer is clicked, I am trying to change background colour: If the answer is true then only its background colour need to be changed green and if it is wrong; changing background colour of correct answer as green and selected input as red. I could make it for the first question but then it does not work for changing background of true answers in the next questions as green. Here is my codes: [jsfiddle] https://jsfiddle.net/zftbgoa5/1/

  jQuery(document).ready(function(){ jQuery('input[data-key="a"]').click(function(){ if (jQuery(this).is(':checked')) { $(this).closest("label").css("background-color", "red"); jQuery("#true").css("background-color", "green"); } }); jQuery('input').click(function(){ if (jQuery(this).is(':checked')) { jQuery("#true").css("background-color", "green"); } }); jQuery('input[data-key="c"]').click(function(){ if (jQuery(this).is(':checked')) { $(this).closest("label").css("background-color", "red"); } document.getElementById("true").style.backgroundColor = "green";}); jQuery('input[data-key="d"]').click(function(){ if (jQuery(this).is(':checked')) { $(this).closest("label").css("background-color", "red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio"/>38.2</label></li> <li><label id="true"><input data-key="b" type="radio"/>38.2</label></li> <li><label><input data-key="c" type="radio"/>38.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label id="true"><input data-key="a" type="radio"/>38.2</label></li> <li><label><input data-key="b" type="radio"/>34.1</label></li> <li><label><input data-key="c" type="radio"/>29.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> 

Answer 1

I have solution for you

jsfiddle

jQuery was not working properly for you. I have shorten it up.

If i spend more time I can make it even better but until them I have fixed your issue

Answer 2

Is this what you needed? If you click the right answer, it turns it green. If you click the wrong one, it turns red and the correct answer lights up in green.

I use classes to determine the right answer and you should too. Having the same id more than one place is very bad practice.

You should also use either jQuery or $ to use jQuery. It references the same thing anyway. Using only one of the two makes the code more consistent and easy to follow.

Caching elements is also important. Look at clickedLabel = $(this).parent() . I store the <label> in clickedLabel and then use the stored value. If I just did $(this).parent() everywhere, I would be making unnecessary DOM operations which are often quite expensive to make.

I would also suggest to look at this to learn a bit more about <label> .

 $(document).ready(function() { $("input").click(function() { var clickedLabel = $(this).parent(), correctLabel = $(this).closest("ul").find("label.true"); correctLabel.css("background-color", "green"); if (!clickedLabel.hasClass("true")) { clickedLabel.css("background-color", "red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio"/>38.2</label></li> <li><label class="true"><input data-key="b" type="radio"/>38.2</label></li> <li><label><input data-key="c" type="radio"/>38.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" type="radio"/>38.2</label></li> <li><label><input data-key="b" type="radio"/>34.1</label></li> <li><label><input data-key="c" type="radio"/>29.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> 

Answer 3

Updates Fiddle

Simply, on change check if parent label has class true make it green. If not make it red and find the true label and make color green.

$(document).ready(function(){
$('input[type="radio"]').change(function(){
    if (!$(this).closest('label').hasClass('true')){
         $(this).closest("label").css("background-color", "red");
         $(this).parents('.answers').find("label.true").css("background-color", "green");
    } else{
       $(this).closest("label").css("background-color", "green");
  }
 });
});

Answer 4

please try this

<div class="questionContainer hide">
    <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
    </div>
      <ul class="answers">
        <li><label class="correct"><input data-key="correct" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.1</label></li>
    </ul>
        </div>
           <div class="questionContainer hide">
    <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
        <ul class="answers">
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="correct"><input data-key="correct" type="radio"/>34.1</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.1</label></li>
    </ul>             
</div>
           <div class="questionContainer hide">           
    <!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div>
    <ul class="answers">
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>34.1</label></li>
        <li><label class="correct"><input data-key="correct" type="radio"/>29.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.1</label></li>
    </ul>
</div> 
           <div class="questionContainer hide">
    <!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div>
  <ul class="answers">
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>34.1</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.2</label></li>
        <li><label class="correct"><input data-key="correct" type="radio"/>29.1</label></li>
    </ul>
</div>     

and in jquery

   jQuery(document).ready(function(){
jQuery('input[type="radio"]').click(function(){

if (jQuery(this).is(':checked'))
{
//alert($(this).attr('data-key'));
 if($(this).attr('data-key')=='wrong')
 {
  $(this).closest("label").css("background-color", "red");
  $(this).closest(".answers").find('.correct').css("background-color", "green");
  }
 else
 {
  $(this).closest("label").css("background-color", "green");
  }
}
 });

});

Answer 5

First of all I would recommend to change your markup to write correct html for radio input. then js code. Remove id true because it's invalid. instead of that I used class. on every answer, I am targeting correct answer and user answer. then comparing result.

 jQuery(document).ready(function(){ $('input[type="radio"]').on('change', function() { var answerInput = $(this).closest('ul.answers').find('li label.true input'); var selectedInput = $(this).closest('ul.answers').find('input[type="radio"]:checked'); if(selectedInput.val() != answerInput.val()){ $(selectedInput).closest('label').css("background-color", "red"); // wrong answer $(answerInput).closest('label').css("background-color", "green"); // correct answer }else{ $(selectedInput).closest('label').css("background-color", "green"); // correct answer } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio" value="38.2"/>38.2</label></li> <li><label class="true"><input data-key="b" value="38.3" type="radio"/>38.3</label></li> <li><label><input data-key="c" type="radio" value="38.2"/>38.2</label></li> <li><label><input data-key="d" type="radio" value="29.1"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" type="radio" value="38.2"/>38.2</label></li> <li><label><input data-key="b" type="radio" value="34.1"/>34.1</label></li> <li><label><input data-key="c" type="radio" value="29.2"/>29.2</label></li> <li><label><input data-key="d" type="radio" value="29.1"/>29.1</label></li> </ul> </div> </div> 

Answer 6

To handle input radio group, property id and name need to be set with same string (question1 and question2 here). Only value of checked input will be send to server.

You don't need to add an event by answer, only one for all with same logic is enough.

Be careful with this approach of hardcoded good answer in html, anybody who look at html DOM with a developer tool can see which option is good one!

Better to send result to server (ajax call) who return if checked option is good answer. But that take more time to implement.

 jQuery(document).ready(function(){ // Add a click event on all input radio jQuery('input[type="radio"]').click(function(){ var inputEvent = jQuery(this); // Check if clicked input is checked if (inputEvent.is(':checked')) { // Check if clicked input is good answer if (inputEvent.prop('good-answer') === true) { // Set click input parent label in green inputEvent.closest("label").css("background-color", "green"); } else { // Set click input parent label in red inputEvent.closest("label").css("background-color", "red"); // Set good-answer parent label to green inputEvent.closest("ul").find('.good-answer').closest("label").css("background-color", "green"); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?</div> <ul class="answers"> <li><label><input id="question1" name="question1" value="a" type="radio"/>38.2</label></li> <li><label><input id="question1" name="question1" value="b" type="radio" class="good-answer"/>38.2</label></li> <li><label><input id="question1" name="question1" value="c" type="radio"/>38.2</label></li> <li><label><input id="question1" name="question1" value="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label><input id="question2" name="question2" type="radio"/>38.2</label></li> <li><label><input id="question2" name="question2" type="radio"/>34.1</label></li> <li><label><input id="question2" name="question2" type="radio" class="good-answer"/>29.2</label></li> <li><label><input id="question2" name="question2" type="radio"/>29.1</label></li> </ul> </div> 

Answer 7

Well there are two important things you need to change to fix your issue.

One - It's a radio button. Hence only one of the each answers needs to be checked at a time . But currently you can click and check all the answers under each question at the same time which is incorrect.

To fix this you need to group your radio buttons under each questions using the name attribute like so:

    <ul class="answers">
        <li>
          <label>
            <input data-key="a" name="one" type="radio"/>
            38.2
          </label>
        </li>
        <li>
          <label class="true">
            <input data-key="b" name="one" type="radio"/>
            38.2
          </label>
        </li>
        <li>
          <label>
            <input data-key="c" name="one" type="radio"/>
            38.2
          </label>
        </li>
        <li>
          <label>
            <input data-key="d" name="one" type="radio"/>
            38.2
          </label>
        </li>
    </ul>

Likewise group each set of radio inputs under its own group(questions) name .

Two - Your JQuery obviously needs improvements.

$(document).ready(function(){
  $('input').click(function() {
    var closestLabel = $(this).closest("label");
    var currentQuestion = $(this).closest(".answers")

    // to clear all previous selections bg color
    currentQuestion.find('label').css("background-color", "initial");

    if (closestLabel.hasClass('true')) {
      // if checked is correct
      closestLabel.css("background-color", "green");
    } else {
      // if checked is wrong, find the correct under this question
      currentQuestion.find('.true').css("background-color", "green");
      // currently checked to background red
      closestLabel.css("background-color", "red");
    }
  });
});

Instead of id make use of class="true"

Here is the Fiddle

 $(document).ready(function(){ $('input').click(function() { $(this).closest(".answers").find('label').css("background-color", "initial"); if ($(this).closest("label").hasClass('true')) { $(this).closest("label").css("background-color", "green"); } else { $(this).closest(".answers").find('.true').css("background-color", "green"); $(this).closest("label").css("background-color", "red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li> <label> <input data-key="a" name="one" type="radio"/> 38.2 </label> </li> <li> <label class="true"> <input data-key="b" name="one" type="radio"/>38.2</label></li> <li><label><input data-key="c" name="one" type="radio"/>38.2</label></li> <li><label><input data-key="d" name="one" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" name="two" type="radio"/>38.2</label></li> <li><label><input data-key="b" name="two" type="radio"/>34.1</label></li> <li><label><input data-key="c" name="two" type="radio"/>29.2</label></li> <li><label><input data-key="d" name="two" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div> <ul class="answers"> <li><label><input data-key="a" type="radio" name="three"/>38.2</label></li> <li><label><input data-key="b" type="radio" name="three"/>34.1</label></li> <li><label><input data-key="c" type="radio" name="three"/>29.2</label></li> <li><label class="true"><input data-key="d" type="radio" name="three"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div> <ul class="answers"> <li><label><input data-key="a" type="radio" name="four"/>38.2</label></li> <li><label><input data-key="b" type="radio" name="four"/>34.1</label></li> <li><label><input data-key="c" type="radio" name="four"/>29.2</label></li> <li><label class="true"><input data-key="d" type="radio" name="four"/>29.1</label></li> </ul> </div> 

Answer 8

Try this just removed js code which was not required and now these js changes will work for all. Also added id to ul tag.

 $(document).ready(function(){ $('input').click(function(){ var id = $(this).closest(".answers").attr('id'); if ($(this).is(':checked')) { if ($(this).closest("label").attr('data-answer')) { $(this).closest("label").css("background-color", "green"); } else { $(this).closest("label").css("background-color", "red"); $('#'+id+' label[data-answer="true"]').css("background-color", "green"); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question">Airbus 300-600 tipi uçağın menzili ne kadardır?</div> <ul class="answers" id="answer1"> <li><label><input data-key="a" type="radio"/>38.2</label></li> <li><label data-answer="true"><input data-key="b" type="radio"/>38.2</label></li> <li><label><input data-key="c" type="radio"/>38.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers" id="answer2"> <li><label data-answer="true"><input data-key="a" type="radio"/>38.2</label></li> <li><label><input data-key="b" type="radio"/>34.1</label></li> <li><label><input data-key="c" type="radio"/>29.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> </div> 

Answer 9

• First add name attribute to radio button so that only one radio button can be selected.
• In jQuery find clicked input box parent and check whether it has "true" class.
• When a wrong answer is selected, use parents() to find ul.answers and then use find() to find label.true.
• To make sure answer can be selected only one time disable all radio buttons once an answer is selected.

 $(document).ready(function() { $("input").click(function() { var parentLabel = $(this).parent(); if (parentLabel.hasClass("true")) { parentLabel.css("background-color", "green"); parentLabel.parents ("ul.answers").find ("input").prop ("disabled", "true"); } else { $(parentLabel).parents ("ul.answers").find("label.true").css("background", "green"); parentLabel.css("background", "red"); parentLabel.parents ("ul.answers").find ("input").prop ("disabled", "true"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio" name="question1"/>38.2</label></li> <li><label class="true"><input data-key="b" type="radio" name="question1"/>38.2</label></li> <li><label><input data-key="c" type="radio" name="question1"/>38.2</label></li> <li><label><input data-key="d" type="radio" name="question1"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" type="radio" name="question2"/>38.2</label></li> <li><label><input data-key="b" type="radio" name="question2"/>34.1</label></li> <li><label><input data-key="c" type="radio" name="question2"/>29.2</label></li> <li><label><input data-key="d" type="radio" name="question2"/>29.1</label></li> </ul> </div>