title: Javascript to change of a list items color when checked
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onchange  = function() {
    var ul = document.getElementById("list_id");
    var items = ul.getElementsByTagName("label");
    for (var i = 0; i &lt; items.length; ++i) {
        if (items[i].checked = true){
           items[i].style.color = "red";
         };
    };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;ul id="list_id" style="border: 1px solid rgb(51, 51, 51); padding: 10px; max-height: 
       250px; display: block; width: 25%; overflow-y: auto;"&gt;
    
    &lt;li class="member user_1"&gt;
      &lt;label class="checkbox" for="user_1"&gt;
        &lt;input name="user[1]" type="hidden" value="0"&gt;
        &lt;input id="user_1" name="user[1]" type="checkbox" value="1"&gt;
        One, User 
      &lt;/label&gt;
    &lt;/li&gt;
  
    &lt;li class="member user_2"&gt;
      &lt;label class="checkbox" for="user_440"&gt;
        &lt;input name="user[2]" type="hidden" value="0"&gt;
        &lt;input id="user_2" name="user[2]" type="checkbox" value="1"&gt;
        Two, User
      &lt;/label&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p>Right now my Javascript looks like this:</p>
  <pre><code>window.onchange  = function() {
    var ul = document.getElementById(&quot;list_id&quot;);
    var items = ul.getElementsByTagName(&quot;label&quot;);
    for (var i = 0; i &lt; items.length; ++i) {
        if (items[i].checked = true){
           items[i].style.color = &quot;red&quot;;
         };
      };
  </code></pre>
  <p>The HTML looks like this;</p>
  <pre><code>     &lt;ul id=&quot;list_id&quot; style=&quot;border: 1px solid rgb(51, 51, 51); padding: 10px; max-height: 
       250px; display: block; width: 25%; overflow-y: auto;&quot;&gt;
    
      &lt;li class=&quot;member user_1&quot;&gt;
        &lt;label class=&quot;checkbox&quot; for=&quot;user_1&quot;&gt;
          &lt;input name=&quot;user[1]&quot; type=&quot;hidden&quot; value=&quot;0&quot;&gt;
          &lt;input id=&quot;user_1&quot; name=&quot;user[1]&quot; type=&quot;checkbox&quot; value=&quot;1&quot;&gt;
          One, User 
        &lt;/label&gt;
      &lt;/li&gt;
    
      &lt;li class=&quot;member user_2&quot;&gt;
        &lt;label class=&quot;checkbox&quot; for=&quot;user_440&quot;&gt;
          &lt;input name=&quot;user[2]&quot; type=&quot;hidden&quot; value=&quot;0&quot;&gt;
          &lt;input id=&quot;user_2&quot; name=&quot;user[2]&quot; type=&quot;checkbox&quot; value=&quot;1&quot;&gt;
          Two, User
        &lt;/label&gt;
      &lt;/li&gt;
  
     &lt;/ul&gt;
  </code></pre>
  <p>Thanks for the help!</p>