How to change background of clicked checkbox-CodePudding

So I am trying to make a exam page. I have choices with checkboxes. And when a choice is selected, I want its background to change. But I am having some issues.

You can see the codes and screen here

Here is HTML code below:

<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>

Here is CSS code below:

.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;
}

Here is JS code below:

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

Here are my problems:

When a choice is selected, only background of text is changing. The background of whole option box should change.
When 'Show Answer' button is clicked. Correct answer is shown with green background but if the selected choice is same with answer text's background is being purple and box's background is being green.

Thank you for help!

CodePudding user response：

via javascript you need to add an onclick event on the label from which you can access the parent style and update background.

You need to loop on them to first add that click event and then loop again to reset the correct background value on click.

here is a basic example (that can surely be optimized), adding/removing 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>

CodePudding user response：

Here is the working Code using onchange event in input

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

function changeSelection() {
  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="changeSelection()">
          <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="changeSelection()">
          <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="changeSelection()">
          <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="changeSelection()">
          <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="changeSelection()">
          <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>

CodePudding user response：

Here is a solution: http://jsfiddle.net/symfou/phw25ydg/26/

class modified:

.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;
}