Changing background colour of multiple labels in 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>

Using one `id` in two or more places is bad practice. In your case, `id="true"` is used more than once. You should use a `class` instead. — dodov, Feb 21 '17 at 08:52
You can't use same ```id``` multiple times on same page. Here you are using ```true``` as a id more than one which is wrong. — aavrug, Feb 21 '17 at 08:53

Luminous_Dev · Answer 1 · 2017-02-21T09:07:18.267

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

edited Feb 21 '17 at 09:07

answered Feb 21 '17 at 09:02

Luminous_Dev

614
6
14

@LaraBelle changed to data attributes – Luminous_Dev Feb 21 '17 at 09:07
Great Job! (+1) for you. – hdotluna Feb 21 '17 at 09:08
Thanks! great solution! – Huseyin Feb 21 '17 at 09:23

score 1 · Accepted Answer · edited May 23 '17 at 12:09

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>

Ganesh Yadav · Answer 3 · 2017-02-21T09:27:07.103

1

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

edited Feb 21 '17 at 09:27

answered Feb 21 '17 at 09:07

Ganesh Yadav

2,607
2
29
52

interesting..first make the background red then override it with green...not a good practice – Luminous_Dev Feb 21 '17 at 09:11
I know, I just wanted the solution exactly like his question. That's why. I have edited it now. – Ganesh Yadav Feb 21 '17 at 09:22

Shibon · Answer 4 · 2017-02-21T09:28:04.740

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

});

read his detail, when wrong selected, must show the correct one straight away. And your code doesnt — Luminous_Dev, Feb 21 '17 at 09:14

score 0 · Answer 5 · answered Feb 21 '17 at 09:14

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>

score 0 · Answer 6 · answered Feb 21 '17 at 09:25

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>

Nikhil Nanjappa · Answer 7 · 2017-02-21T09:41:56.260

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>

You should store `$(this).closest("label")` in a variable because you use it several times and you make unnecessary calls to the DOM. — dodov, Feb 21 '17 at 09:38

score 0 · Answer 8 · answered Feb 21 '17 at 09:28

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>

score 0 · Answer 9 · answered Feb 21 '17 at 09:54

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>

Changing background colour of multiple labels in jQuery

9 Answers9