检查时更改列表项颜色的Javascript

Question

window.onchange  = function() {
  var ul = document.getElementById("list_id");
  var items = ul.getElementsByTagName("label");
  for (var i = 0; i < items.length; ++i) {
      if (items[i].checked = true){
         items[i].style.color = "red";
       };
  };
}

 <ul id="list_id" style="border: 1px solid rgb(51, 51, 51); padding: 10px; max-height: 
     250px; display: block; width: 25%; overflow-y: auto;">
  
  <li class="member user_1">
    <label class="checkbox" for="user_1">
      <input name="user[1]" type="hidden" value="0">
      <input id="user_1" name="user[1]" type="checkbox" value="1">
      One, User 
    </label>
  </li>

  <li class="member user_2">
    <label class="checkbox" for="user_440">
      <input name="user[2]" type="hidden" value="0">
      <input id="user_2" name="user[2]" type="checkbox" value="1">
      Two, User
    </label>
  </li>

</ul>

我正在尝试编写 Javascript，以便当用户选择这些列表项之一时，颜色仅为所选项目变为红色。我遇到的问题是这会选择所有列表项，而不是选择的一项。
现在我的 Javascript 看起来像这样:

window.onchange  = function() {
  var ul = document.getElementById("list_id");
  var items = ul.getElementsByTagName("label");
  for (var i = 0; i < items.length; ++i) {
      if (items[i].checked = true){
         items[i].style.color = "red";
       };
    };

HTML 看起来像这样；

     <ul id="list_id" style="border: 1px solid rgb(51, 51, 51); padding: 10px; max-height: 
     250px; display: block; width: 25%; overflow-y: auto;">
  
    <li class="member user_1">
      <label class="checkbox" for="user_1">
        <input name="user[1]" type="hidden" value="0">
        <input id="user_1" name="user[1]" type="checkbox" value="1">
        One, User 
      </label>
    </li>
  
    <li class="member user_2">
      <label class="checkbox" for="user_440">
        <input name="user[2]" type="hidden" value="0">
        <input id="user_2" name="user[2]" type="checkbox" value="1">
        Two, User
      </label>
    </li>

   </ul>

谢谢您的帮助!

Answer 1

您可以执行类似的操作来达到@HereticMonkey 在评论中所写的预期结果。

[...document.querySelectorAll('label')].forEach(label => {
  label.addEventListener('change', () => {
    label.style.color = label.querySelector('[type="checkbox"]').checked ? "red" : "";
  });
});

<ul>
  <li>
    <label>
      <input type="checkbox">
      One, User 
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      Two, User
    </label>
  </li>
</ul>

也看看这个很酷的 fiddle来自@DavidsaysreinstateMonica