CODEWITHSUNDEEP
javascripthtml
Sam Koenig
Sam Koenig

Reputation: 53

Javascript to change of a list items color when checked

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>

I am trying to write Javascript so that when one of these list items is selected by the user, the color changes red just for the selected item. The issue I am running into is that this selects all of the list items, instead of the one that is selected.

Right now my Javascript looks like this:

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

The HTML looks like this;

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

Thanks for the help!

Upvotes: 5

Views: 93

Answers (3)

Redu
Redu

Reputation: 26161

Basically you can add an eventlistener to the onchange event of each <label> element to .toggle("class_name"). When the child <input type="checkbox"> element fires an onchange event, it will bubble up and trigger <label>'s eventlistener too.

document.querySelector("#list_id")
        .querySelectorAll("label")
        .forEach(cb => cb.onchange = function(){
                                       this.classList.toggle("yoy");
                                     });
.yoy { color: #de1e7e
     }
<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_440" name="user[2]" type="checkbox" value="1">
      Two, User
    </label>
  </li>
</ul>

Upvotes: 0

A1rPun
A1rPun

Reputation: 16837

You can do something like this to achieve the desired result just what @HereticMonkey wrote in the comments.

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

Also check out this cool fiddle from @DavidsaysreinstateMonica

Upvotes: 2

Maria
Maria

Reputation: 399

If you replace your JS by this, it will work:

let lis = document.getElementsByTagName("li");

for (let i = 0; i < lis.length; i++) {
  lis[i].onchange = function () {
    if (lis[i].style.color === "red") {
      lis[i].style.color = "black";
    } else {
      lis[i].style.color = "red";
    }
  };
}

Right now you are selecting all of your labels, and then setting checked to true (single equal sign), and then adding the color red to it.

I made it a bit simpler by selecting the li element, but there might be even more elegant ways to do it.

Upvotes: 0

Related Questions