Changing the background color of a clicked checkbox can be done by using CSS

Question

Changing the background color of a clicked checkbox can be done by using CSS

Currently, I am working on creating an exam page that features choices with checkboxes. My goal is to have the background of a selected choice change color. However, I am encountering some obstacles.

To view the codes and screen, please click here

Here is the HTML code snippet:

<div class="questions">
  <div class="questions-left-column">
    <div class="question-area">
      <p>QUESTION</p>
      <div class="choices">
        <div class="choice answer" id="1answer">
          <input id="choice-1a" type="radio" name="radio1" />
          <label for="choice-1a">
            <strong>A.</strong>
            Option A
          </label>
        </div>
        <div class="choice">
          <input id="choice-1b" type="radio" name="radio1" />
          <label for="choice-1b">
            <strong>B.</strong>
            Option B
          </label>
        </div>
        <div class="choice">
          <input id="choice-1c" type="radio" name="radio1" />
          <label for="choice-1c">
            <strong>C.</strong>
            Option C
          </label>
        </div>
        <div class="choice">
          <input id="choice-1d" type="radio" name="radio1" />
          <label for="choice-1d">
            <strong>D.</strong>
            Option D
          </label>
        </div>
        <div class="choice">
          <input id="choice-1e" type="radio" name="radio1" />
          <label for="choice-1e">
            <strong>E.</strong>
            Option E
          </label>
        </div>
      </div>
      <div class="show-answer-button-container">
        <label class="show-answer">
          <fieldset hidden class="answers">
            <strong>Correct Answer: </strong>
            A
          </fieldset>
          <button type="button" onclick="checkAnswers()">Check Answers</button>
        </label>
      </div>
    </div>
  </div>
</div>

Provided below is the CSS code portion:

.selectt {
  display: none;
}
.questions {
  display: flex;
  justify-content: center;
  border: 0.3px solid gray;
  padding: 10px;
}
.questions-left-column {
  flex-direction: column;
  border-right: 1px solid black;
  width: 400px;
  padding-right: 100px;
}
.question-area {
  margin-bottom: 30px;
  border: 0.3px solid gray;
  padding: 10px;
}
.choice {
  width: 350px;
  padding: 0.5rem;
  align-content: left;
  justify-self: center;
  border: 1px solid darkgrey;
}

.choice input[type="radio"]:checked + label {
  padding: 0.5rem;
  background: rgb(226, 182, 182);
  cursor: default;
}
input {
  visibility: hidden;
}

label {
  cursor: pointer;
}

.show-answer-button-container {
  margin: 10px;
}

.show-answer {
  margin-top: 0.5rem;
  align-items: right;
  padding: 0.1rem;
  border: 0.5px solid rgb(119, 108, 108);
  background: rgb(133, 183, 212);
  color: white;
  border-radius: 0.2rem;
}

Lastly, here is the JS code section provided:

function checkAnswers() {
  var elements = document.getElementsByClassName("choice answer");
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "lightgreen";
  }
}

The issues that I am currently facing include:

After selecting a choice, only the background color of the text changes rather than the entire option box.
When clicking the 'Show Answer' button, the correct answer is displayed with a green background. However, if the chosen option matches the answer text's background, it turns purple while the box's background remains green.

I appreciate any assistance provided!

javascript html css frontend

Answer 1

Answer №1

To implement a JavaScript function that adds an onclick event to the label, allowing you to access the parent style and update the background, you must iterate through the elements first to add the click event and then loop again to reset the correct background value upon clicking.

Below is a basic example (which can be further optimized) demonstrating how to add or remove a class:

function checkAnswers() {
  var elements = document.getElementsByClassName("choice answer");
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "lightgreen";
  }
}
/* added */

const choices = document.querySelectorAll(".choice label");// get them all
// add onclick on labels found
for (let i = 0; i < choices.length; i++) {
  choices[i].addEventListener("click", () => {
    check(i);
  });
}
// triggered from the label click 
function check(el) {
  // reset all to none
  for (let ii = 0; ii < choices.length; ii++) {
    choices[ii].parentNode.classList.remove("selected");
  }
  // reset the label's parent classList
  choices[el].parentNode.classList.add("selected");
}

.selectt {
  display: none;
}

.questions {
  display: flex;
  justify-content: center;
  border: 0.3px solid gray;
  padding: 10px;
}

.questions-left-column {
  flex-direction: column;
  border-right: 1px solid black;
  width: 400px;
  padding-right: 100px;
}

.question-area {
  margin-bottom: 30px;
  border: 0.3px solid gray;
  padding: 10px;
}

.choice {
  width: 350px;
  padding: 0.5rem;
  align-content: left;
  justify-self: center;
  border: 1px solid darkgrey;
}

.choice input[type="radio"]:checked+label {
  padding: 0.5rem;

  cursor: default;
}

input {
  visibility: hidden;
}

label {
  cursor: pointer;
}

.show-answer-button-container {
  margin: 10px;
}

.show-answer {
  margin-top: 0.5rem;
  align-items: right;
  padding: 0.1rem;
  border: 0.5px solid rgb(119, 108, 108);
  background: rgb(133, 183, 212);
  color: white;
  border-radius: 0.2rem;
}

.selected {
  background: rgb(226, 182, 182);
}

<div class="questions">
  <div class="questions-left-column">
    <div class="question-area">
      <p>QUESTION</p>
      <div class="choices">
        <div class="choice answer" id="1answer">
          <input id="choice-1a" type="radio" name="radio1" />
          <label for="choice-1a">
            <strong>A.</strong>
            Option A
          </label>
        </div>
        <div class="choice">
          <input id="choice-1b" type="radio" name="radio1" />
          <label for="choice-1b">
            <strong>B.</strong>
            Option B
          </label>
        </div>
        <div class="choice">
          <input id="choice-1c" type="radio" name="radio1" />
          <label for="choice-1c">
            <strong>C.</strong>
            Option C
          </label>
        </div>
        <div class="choice">
          <input id="choice-1d" type="radio" name="radio1" />
          <label for="choice-1d">
            <strong>D.</strong>
            Option D
          </label>
        </div>
        <div class="choice">
          <input id="choice-1e" type="radio" name="radio1" />
          <label for="choice-1e">
            <strong>E.</strong>
            Option E
          </label>
        </div>
      </div>
      <div class="show-answer-button-container">
        <label class="show-answer">
          <fieldset hidden class="answers">
           <strong>Correct Answer: </strong>
            A
          </fieldset>
          <button type="button" onclick="checkAnswers()">Check Answers</button>
        </label>
      </div>
    </div>
  </div>
</div>

Answer 2

To implement a JavaScript function that adds an onclick event to the label, allowing you to access the parent style and update the background, you must iterate through the elements first to add the click event and then loop again to reset the correct background value upon clicking.

Below is a basic example (which can be further optimized) demonstrating how to add or remove a class:

function checkAnswers() {
  var elements = document.getElementsByClassName("choice answer");
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "lightgreen";
  }
}
/* added */

const choices = document.querySelectorAll(".choice label");// get them all
// add onclick on labels found
for (let i = 0; i < choices.length; i++) {
  choices[i].addEventListener("click", () => {
    check(i);
  });
}
// triggered from the label click 
function check(el) {
  // reset all to none
  for (let ii = 0; ii < choices.length; ii++) {
    choices[ii].parentNode.classList.remove("selected");
  }
  // reset the label's parent classList
  choices[el].parentNode.classList.add("selected");
}

.selectt {
  display: none;
}

.questions {
  display: flex;
  justify-content: center;
  border: 0.3px solid gray;
  padding: 10px;
}

.questions-left-column {
  flex-direction: column;
  border-right: 1px solid black;
  width: 400px;
  padding-right: 100px;
}

.question-area {
  margin-bottom: 30px;
  border: 0.3px solid gray;
  padding: 10px;
}

.choice {
  width: 350px;
  padding: 0.5rem;
  align-content: left;
  justify-self: center;
  border: 1px solid darkgrey;
}

.choice input[type="radio"]:checked+label {
  padding: 0.5rem;

  cursor: default;
}

input {
  visibility: hidden;
}

label {
  cursor: pointer;
}

.show-answer-button-container {
  margin: 10px;
}

.show-answer {
  margin-top: 0.5rem;
  align-items: right;
  padding: 0.1rem;
  border: 0.5px solid rgb(119, 108, 108);
  background: rgb(133, 183, 212);
  color: white;
  border-radius: 0.2rem;
}

.selected {
  background: rgb(226, 182, 182);
}

<div class="questions">
  <div class="questions-left-column">
    <div class="question-area">
      <p>QUESTION</p>
      <div class="choices">
        <div class="choice answer" id="1answer">
          <input id="choice-1a" type="radio" name="radio1" />
          <label for="choice-1a">
            <strong>A.</strong>
            Option A
          </label>
        </div>
        <div class="choice">
          <input id="choice-1b" type="radio" name="radio1" />
          <label for="choice-1b">
            <strong>B.</strong>
            Option B
          </label>
        </div>
        <div class="choice">
          <input id="choice-1c" type="radio" name="radio1" />
          <label for="choice-1c">
            <strong>C.</strong>
            Option C
          </label>
        </div>
        <div class="choice">
          <input id="choice-1d" type="radio" name="radio1" />
          <label for="choice-1d">
            <strong>D.</strong>
            Option D
          </label>
        </div>
        <div class="choice">
          <input id="choice-1e" type="radio" name="radio1" />
          <label for="choice-1e">
            <strong>E.</strong>
            Option E
          </label>
        </div>
      </div>
      <div class="show-answer-button-container">
        <label class="show-answer">
          <fieldset hidden class="answers">
           <strong>Correct Answer: </strong>
            A
          </fieldset>
          <button type="button" onclick="checkAnswers()">Check Answers</button>
        </label>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Check out this solution for modifying the CSS classes: http://jsfiddle.net/symfou/phw25ydg/26/

Here is the updated CSS:

.choice {
    position: relative;
    width: 350px;
    padding: .5rem;
    align-content: left;
    justify-self: center;
    border: 1px solid darkgrey;
}

.choice input[type="radio"]:checked + label strong{
    padding-left: 25px;
}

.choice input[type="radio"]:checked + label {
    padding: .5rem 0;
    background-color:rgb(226, 182, 182);
    cursor: default;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    margin: 0;
}

Answer 4

Check out this solution for modifying the CSS classes: http://jsfiddle.net/symfou/phw25ydg/26/

Here is the updated CSS:

.choice {
    position: relative;
    width: 350px;
    padding: .5rem;
    align-content: left;
    justify-self: center;
    border: 1px solid darkgrey;
}

.choice input[type="radio"]:checked + label strong{
    padding-left: 25px;
}

.choice input[type="radio"]:checked + label {
    padding: .5rem 0;
    background-color:rgb(226, 182, 182);
    cursor: default;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    margin: 0;
}

Answer 5

Answer №3

Here is a Code snippet demonstrating the use of onchange event in input

function validateSelection() {
  var elements = document.getElementsByClassName("choice answer");
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "lightgreen";
  }
}

function updateSelection() {
  Array.prototype.forEach.call(document.getElementsByClassName('option'), function(el) {
    let elements = document.getElementsByClassName("choice answer");
    if (el.checked) {
      el.parentNode.style.backgroundColor = "rgb(226, 182, 182)";
    } else {
      el.parentNode.style.backgroundColor = "";
    }
  });
}

.selectt {
    display : none;
}
.questions {
    display: flex;
    justify-content: center;
    border: .3px solid gray;
    padding: 10px;    
}
.questions-left-column {
    flex-direction: column;
    border-right: 1px solid black;
    width: 400px;
    padding-right: 100px;
    }
.question-area {
    margin-bottom: 30px;
    border: .3px solid gray;
    padding: 10px;
}
.choice {
    
    width: 350px;
    padding: .5rem;
    align-content: left;
    justify-self: center;
    border: 1px solid darkgrey;
}

input {
    visibility:hidden;
}

label {
    cursor: pointer;
}

.show-answer-button-container {
    margin: 10px;
}

.show-answer {
    margin-top: .5rem;
    align-items: right;
    padding: .1rem;
    border: .5px solid rgb(119, 108, 108);
    background: rgb(133, 183, 212);
    color: white;
    border-radius: .2rem;
}

<div class="questions">
  <div class="questions-left-column">
    <div class="question-area">
      <p>QUESTION</p>
      <div class="choices">
        <div class="choice answer" id="1answer">
          <input id="choice-1a" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1a">
            <strong>A.</strong>
            Option A
          </label>
        </div>
        <div class="choice">
          <input id="choice-1b" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1b">
            <strong>B.</strong>
            Option B
          </label>
        </div>
        <div class="choice">
          <input id="choice-1c" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1c">
            <strong>C.</strong>
            Option C
          </label>
        </div>
        <div class="choice">
          <input id="choice-1d" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1d">
            <strong>D.</strong>
            Option D
          </label>
        </div>
        <div class="choice">
          <input id="choice-1e" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1e">
            <strong>E.</strong>
            Option E
          </label>
        </div>
      </div>
      <div class="show-answer-button-container">
        <label class="show-answer">

          <fieldset hidden class="answers">
            <strong>Correct Answer: </strong>
            A
          </fieldset>

          <button type="button" onclick="validateSelection()">Validate Answers</button>

Answer 6

Here is a Code snippet demonstrating the use of onchange event in input

function validateSelection() {
  var elements = document.getElementsByClassName("choice answer");
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "lightgreen";
  }
}

function updateSelection() {
  Array.prototype.forEach.call(document.getElementsByClassName('option'), function(el) {
    let elements = document.getElementsByClassName("choice answer");
    if (el.checked) {
      el.parentNode.style.backgroundColor = "rgb(226, 182, 182)";
    } else {
      el.parentNode.style.backgroundColor = "";
    }
  });
}

.selectt {
    display : none;
}
.questions {
    display: flex;
    justify-content: center;
    border: .3px solid gray;
    padding: 10px;    
}
.questions-left-column {
    flex-direction: column;
    border-right: 1px solid black;
    width: 400px;
    padding-right: 100px;
    }
.question-area {
    margin-bottom: 30px;
    border: .3px solid gray;
    padding: 10px;
}
.choice {
    
    width: 350px;
    padding: .5rem;
    align-content: left;
    justify-self: center;
    border: 1px solid darkgrey;
}

input {
    visibility:hidden;
}

label {
    cursor: pointer;
}

.show-answer-button-container {
    margin: 10px;
}

.show-answer {
    margin-top: .5rem;
    align-items: right;
    padding: .1rem;
    border: .5px solid rgb(119, 108, 108);
    background: rgb(133, 183, 212);
    color: white;
    border-radius: .2rem;
}

<div class="questions">
  <div class="questions-left-column">
    <div class="question-area">
      <p>QUESTION</p>
      <div class="choices">
        <div class="choice answer" id="1answer">
          <input id="choice-1a" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1a">
            <strong>A.</strong>
            Option A
          </label>
        </div>
        <div class="choice">
          <input id="choice-1b" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1b">
            <strong>B.</strong>
            Option B
          </label>
        </div>
        <div class="choice">
          <input id="choice-1c" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1c">
            <strong>C.</strong>
            Option C
          </label>
        </div>
        <div class="choice">
          <input id="choice-1d" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1d">
            <strong>D.</strong>
            Option D
          </label>
        </div>
        <div class="choice">
          <input id="choice-1e" type="radio" name='radio1' class="option" onchange="updateSelection()">
          <label for="choice-1e">
            <strong>E.</strong>
            Option E
          </label>
        </div>
      </div>
      <div class="show-answer-button-container">
        <label class="show-answer">

          <fieldset hidden class="answers">
            <strong>Correct Answer: </strong>
            A
          </fieldset>

          <button type="button" onclick="validateSelection()">Validate Answers</button>

Changing the background color of a clicked checkbox can be done by using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing custom template tags with script tags for componentization within Django applications

A method for generating CSS code from the structure of an HTML document

What is the best way to exchange variables between siblings?

What types of video formats will be accepted?

Navigate back to the previous slide utilizing slick and jquery

The issue of linking .then() functions

HTML formatting for text

Using Javascript and ExtJS to retrieve the Codemirror Editor using a textarea

Show the text based on the current count of the counter

Steps for iterating through an array within an object

Steps to modify the CSS of a custom component in Angular 8

Best practices for implementing the <head> tag in an Angular directive

The GET request for a "places" endpoint in a node js application is experiencing issues

Linking all styles with Angular 2

What is the reason behind arr.reverse() flipping the original array?

Ways to prevent this column from taking up vertical space

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Assign a different color to every other pair of rows

I keep running into an issue whenever I attempt to import material ui icons and core - a frustrating error message pops up stating that the module cannot be found

Is it possible to handle user roles solely using JavaScript?