Paulo Dos Santos Paulo Dos Santos - 1 month ago 11
CSS Question

Toggle background color on radio button selection

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

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>

Comments