javascripthtmlcssloopscheckbox

Managing checkbox states in a JavaScript array without impacting other checkboxes


I have multiple checkboxes, and each checkbox is assigned either value="0" or value="1". I want to check each checkbox; if a checkbox has value="0", the text color of that checkbox should change to red.

When I run the function, all the checkboxes have their text color changed to red. Even if I change "0" to "1", the result does not change.

Please tell me the reason and how to fix it.

I have written the following code:

const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
for (let k = 0; k < allCheckboxes.length; k++) {
  const checkbox = allCheckboxes[k];
  if (checkbox.value === "0") {
    checkbox.parentNode.style.color = "red";
  }
}
.correct-answer {
  color: red;
}
<p><b>Question 1:</b> A ball is dropped from a height of 5.00 m and completely elastically collides with the ground (the rebound speed from the ground is equal to the speed just before hitting the ground). Assume that mechanical energy is not lost due to
  air resistance. Take $g = 10\ \text{m/s}^2$.</p>
<div id="trueFalseForm">
  <input type="checkbox" name="q19" value="0"> <b>a)</b> The motion of the ball is simple harmonic motion.<br>
  <input type="checkbox" name="q19" value="1"> <b>b)</b> The speed of the ball when it hits the ground is $10\ \text{m/s}$.<br>
  <input type="checkbox" name="q19" value="1"> <b>c)</b> The motion of the ball is periodic.<br>
  <input type="checkbox" name="q19" value="0"> <b>d)</b> The period of the ball's motion is $1\ \text{s}$.<br>
</div>
<p><b>Question 2:</b> An object oscillates harmonically; it takes 0.25 seconds to move from a point with zero velocity to the next point with zero velocity. The distance between these two points is 36 cm. Calculate (a) the period, (b) the frequency, and
  (c) the amplitude of the motion.</p>
<div id="trueFalseForm">
  <input type="checkbox" name="q20" value="1"> <b>a)</b> The period of the oscillation is 0.5 s.<br>
  <input type="checkbox" name="q20" value="0"> <b>b)</b> The amplitude of the oscillation is 36 cm.<br>
  <input type="checkbox" name="q20" value="1"> <b>c)</b> The maximum speed of the object is 226.19 cm/s.<br>
  <input type="checkbox" name="q20" value="0"> <b>d)</b> The maximum distance the object can travel in 0.125 s is 18 cm.<br>
</div>


Solution

  • The parentNode for all checkboxes is the container div

    IDs need to be unique so I changed trueFalseForm to be a class

    I also wonder why correctAnswer would be red, so I changed that too

    Use labels (which improves the user's ability to check the box) and a class and the script below or set the class when you assign the value

    I made the label display:block to not need the br

    const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
    allCheckboxes
      .forEach(checkbox => checkbox.closest('label').classList.toggle('wrongAnswer', checkbox.value === '0'))
    .trueFalseForm label { display:block}
    .wrongAnswer {
      color: red;
    }
    <p><b>Question 1:</b> A ball is dropped from a height of 5.00 m and completely elastically collides with the ground (the rebound speed from the ground is equal to the speed just before hitting the ground). Assume that mechanical energy is not lost due to
      air resistance. Take $g = 10\ \text{m/s}^2$.</p>
    <div class="trueFalseForm">
      <label>
      <input type="checkbox" name="q19" value="0"> <b>a)</b> The motion of the ball is simple harmonic motion.</label>
      <label>  <input type="checkbox" name="q19" value="1"> <b>b)</b> The speed of the ball when it hits the ground is $10\ \text{m/s}$.</label>
      <label>  <input type="checkbox" name="q19" value="1"> <b>c)</b> The motion of the ball is periodic.</label>
      <label>  <input type="checkbox" name="q19" value="0"> <b>d)</b> The period of the ball's motion is $1\ \text{s}$.</label>
    </div>
    <p><b>Question 2:</b> An object oscillates harmonically; it takes 0.25 seconds to move from a point with zero velocity to the next point with zero velocity. The distance between these two points is 36 cm. Calculate (a) the period, (b) the frequency, and
      (c) the amplitude of the motion.</p>
    <div class="trueFalseForm">
      <label>  <input type="checkbox" name="q20" value="1"> <b>a)</b> The period of the oscillation is 0.5 s.</label>
      <label>  <input type="checkbox" name="q20" value="0"> <b>b)</b> The amplitude of the oscillation is 36 cm.</label>
      <label>  <input type="checkbox" name="q20" value="1"> <b>c)</b> The maximum speed of the object is 226.19 cm/s.</label>
      <label>  <input type="checkbox" name="q20" value="0"> <b>d)</b> The maximum distance the object can travel in 0.125 s is 18 cm.</label>
    </div>