title: Property of DOM element different depending on selector - jQuery
body: <p>So I have a <code>ul</code> of checkboxes and I want to allow users to click anywhere on the <code>li</code> elements to check/uncheck the corresponding checkbox, then apply the changes to the page via javascript. Note that all checkboxes start out checked. This is the layout, excluding a few more <code>li</code> elements.</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
      &lt;li class="cat-header"&gt;
          &lt;strong&gt;Category&lt;/strong&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a class="filter-link"&gt; Red
              &lt;input checked="true" class="cat-check" data-filter="red" data-type="color" type="Checkbox"&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>I then try use javascript to alter the page based on the <code>checked</code> property of the checkboxes. However, I'm getting different values based on how I select the elements. My function looks like this </p>
  
  <pre><code>setFilter = function(checkbox) {
    console.log(checkbox);
    if ($(checkbox).attr('data-type') === "color") {
      if (!$(checkbox).prop('checked')) {
        $(checkbox).prop('checked', false);
        colorFilter = colorFilter.replace($(checkbox).attr('data-filter') + " ", "");
      } else {
        $(checkbox).prop('checked', true);
        colorFilter = colorFilter + $(checkbox).attr('data-filter') + " ";
      }
    } else if ($(checkbox).attr('data-type') === "shape") {
      if (!$(checkbox).prop('checked')) {
        $(checkbox).prop('checked', false);
        shapeFilter = shapeFilter + $(checkbox).attr('data-filter') + " ";
      } else {
        $(checkbox).prop('checked', true);
        shapeFilter = shapeFilter.replace($(checkbox).attr('data-filter') + " ", "");
      }
    }
  }; 
  </code></pre>
  
  <p>A couple notes. First, color is inclusive (i.e. show it if it has that color) while shape is exclusive (i.e. don't show it if it has that shape) hence the slightly different logic. Second, <code>.prop()</code> function was returning the opposite values of what I was expecting hence the <code>if (!$(checkbox).prop('checked'))</code></p>
  
  <p>When I call it like this, it prints out true</p>
  
  <pre><code>$('.filter-link').click(function(e) { 
      setFilter($(this).children("input")[0]);
    });
  </code></pre>
  
  <p>but when I call it like this, it prints out false</p>
  
  <pre><code>$('.cat-check').click(function(e) {
      setFilter($(this)[0]);
    });
  </code></pre>
  
  <p>I tried to reproduce the effect in JSFiddle (<a href="https://jsfiddle.net/eg9c4vkv/6/" rel="nofollow noreferrer">https://jsfiddle.net/eg9c4vkv/6/</a>) but was unable to duplicate the effect. I also thought it might be related to console.log (<a href="https://stackoverflow.com/questions/7389069/console-log-object-at-current-state">How can I change the default behavior of console.log? (*Error console in safari, no add-on*)</a>) but theoretically the function should be behaving the same as long as the input is the same. Does anyone have any ideas?</p>