Html Question posted in
Some basic documentation can be found here.

Html – 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. 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";  
    }
}

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.
This is CSS

.correct-answer {
      color: red;
    }

This is HTML

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

2

Answers


  1. 0

    What is the parentnode of the checkbox – perhaps a closest is more appropriate.

    In any case use a class and do

    const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
allCheckboxes
  .forEach(checkbox => checkbox.parentNode.classList.toggle('red',checkbox.value === '0'))

    or set the class when you assign the value

    Login or Signup to reply.
  2. 0

    I would suggest to wrap the checkbox with LABEL, that would give better UX, and use CSS to style label’s text color with :has()

    #trueFalseForm label{
  display:block;
  margin-bottom: 3px;
}
#trueFalseForm label:has(input[type=checkbox][value="0"]){
  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">
  <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>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search