在单选按钮选择上切换背景色

Question

I'm creating a quiz for test practice with lots of questions. Each question has five radio buttons, and among them there is only one right answer. In the first moment, the 5 options have a grey background. Once you click on a wrong option, it changes to red. If you click on another wrong option, it turns red and the previous one changes to grey. If you click on the right answer, it turns green and all the others stay grey.

 $(document).ready(function() { $("input[value='wrong']").click(function() { $("label").css("background-color", "red"); }); $("input[value='right']").click(function() { $("label").css("background-color", "green"); }); }); 

 .option { background: #eee; display: block; padding: 5px 10px 5px; color: #000; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); position: relative; cursor: pointer; text-decoration: none; margin-bottom: 10px; } input[type="radio"] { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form3"> <input type="radio" name="option" value="wrong" class="option1"> <label class="option">Option 1</label> <input type="radio" name="option" value="wrong" class="option2"> <label class="option">Option 2</label> <input type="radio" name="option" value="wrong" class="option3"> <label class="option">Option 3</label> <input type="radio" name="option" value="right" class="option4"> <label class="option">Option 4</label> <input type="radio" name="option" value="wrong" class="option5"> <label class="option">Option 5</label> </form> 

How can I get there with JQuery?

Answer 1

First you would need to change your markup.

Wrap each input inside the label .

Example:

<label class="option">
   <input type="radio" name="option" value="wrong" class="option1">Option 1
</label>

Then change your CSS, to actually make the input clickable, but hidden:

input[type="radio"] {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

We will be using two helper classes as well:

.right {
  background-color: green;
}
.wrong {
  background-color: red;
}

Finally change your JS to:

$(document).ready(function() {
  $("input[value='wrong']").click(function() {
    $(this).parent()
      .addClass("wrong") //Add class wrong to the label
      .siblings().removeClass("right wrong"); // Remove classes from the other labels.
  });
  $("input[value='right']").click(function() {
    $(this).parent()
      .addClass("right") //Add class right to the label
      .siblings().removeClass("right wrong");// Remove classes from the other labels.
  });
});

---

Code Snippet:

 $(document).ready(function() { $("input[value='wrong']").click(function() { $(this).parent() .addClass("wrong") .siblings().removeClass("right wrong"); }); $("input[value='right']").click(function() { $(this).parent() .addClass("right") .siblings().removeClass("right wrong"); }); }); 

 .option { background: #eee; display: block; padding: 5px 10px 5px; color: #000; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); position: relative; text-decoration: none; margin-bottom: 10px; } input[type="radio"] { opacity: 0; margin: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; cursor: pointer; } .right { background-color: green; } .wrong { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form3"> <label class="option"> <input type="radio" name="option" value="wrong" class="option1">Option 1 </label> <label class="option"> <input type="radio" name="option" value="wrong" class="option2">Option 2 </label> <label class="option"> <input type="radio" name="option" value="wrong" class="option3">Option 3 </label> <label class="option"> <input type="radio" name="option" value="right" class="option4">Option 4 </label> <label class="option"> <input type="radio" name="option" value="wrong" class="option5">Option 5 </label> </form> 

Answer 2

here is the working fiddle https://jsfiddle.net/0kexaguw/3/

 $(document).ready(function() { $("input[type='radio']").on('click',function() { if($(this).attr('value')=="wrong"){ $(this).next().css("background", "red"); }else{ $(this).next().css("background", "green"); } }); }); 

 .option { background: #eee; display: block; padding: 5px 10px 5px; color: #000; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); position: relative; cursor: pointer; text-decoration: none; margin-bottom: 10px; } input[type="radio"] { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form3"> <input type="radio" name="option" value="wrong" class="option1"> <label class="option">Option 1</label> <input type="radio" name="option" value="wrong" class="option2"> <label class="option">Option 2</label> <input type="radio" name="option" value="wrong" class="option3"> <label class="option">Option 3</label> <input type="radio" name="option" value="right" class="option4"> <label class="option">Option 4</label> <input type="radio" name="option" value="wrong" class="option5"> <label class="option">Option 5</label> </form> 

Answer 3

Try using data-attributes on this. Check my snippet.

 $(document).ready(function() { $("label").click(function() { if ($(this).data('attr') == 'wrong') { $(this).css("background", "red"); } else { $(this).css("background", "green");} }); }); 

 .option { background: #eee; display: block; padding: 5px 10px 5px; color: #000; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); position: relative; cursor: pointer; text-decoration: none; margin-bottom: 10px; } input[type="radio"] { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form3"> <input type="radio" name="option" data-attr="wrong" class="option1"> <label class="option" data-attr="wrong">Option 1</label> <label class="option" data-attr="wrong">Option 2</label> <label class="option" data-attr="wrong">Option 3</label> <label class="option" data-attr="right">Option 4</label> <label class="option" data-attr="right">Option 5</label> </form>