Property Of DOM Element Different Depending On Selector - JQuery

So I have a ul of checkboxes and I want to allow users to click anywhere on the li elements to check/uncheck the corresponding checkbox, then apply the changes to the page via java

Solution 1:

I see a couple minor issues, but nothing obvious.

First would be the way in which you're accessing the data attribute. Second is how you're binding handlers (are you sure each time you click the checkbox an event isn't fired for both .cat-check AND .filter-link, which could result in unexpected behavior).. either way I've redone the function just in case it helps.

By including the data- prefix on the attribute, you're telling jQuery to cache the value automatically when it's ready.
Refer to jQuery data docs for more info

<a href="" data-filter="hello">Hello</a>

would be equivalent to

$('a').data('filter', 'hello');

To access the data, you just need to use the key, which in this case would be filter or type. It's worth noting that you could access the attribute directly like you are, but use one or the other (preferably .data).

e.g. with markup..

<a href="" data-filter="hello">Hello</a>

$('a').on('click', function(e) { 
    var $this = $(this);
    $this.data('filter', 'I changed');
    //what will the value be?  It's going to be 'Hello', because we're accessing the attribute in the DOM
    alert($this.attr('data-filter'));

    //what will the value be?  It's going to be 'I changed', because we're accessing the data cache
    alert($this.data('filter'));
});

Give this a try, I think I understand what it is you're trying to do (the below snippet should work for you)

var colorFilter = 'red green yellow ';

$('.dropdown-menu')
  .on('click', 'li', function(e) {
  	//check the source of the event, if the checkbox was already clicked then let it continue
    if (e.target.type != "checkbox") {
      $(this).find(".cat-check").click();
    }
  })
  .on('click', '.cat-check', function() {
    console.log(this);
    var $checkbox = $(this),
      type = $checkbox.data('type'),
      filter = $checkbox.data('filter'),
      isChecked = $checkbox.prop('checked');
    console.log(isChecked);
    if (type === "color") {
      if (isChecked) {
        if (colorFilter.indexOf(filter) < 0) {
          colorFilter = colorFilter + filter + " ";
        }
      } else {
        colorFilter = colorFilter.replace(filter + " ", "");
      }
      $('#filter').text(colorFilter);
    } else if (type === "shape") {
      if (isChecked) {
        if (colorFilter.indexOf(filter) < 0) {
          shapeFilter = shapeFilter + filter + " ";
        }
      } else {
        shapeFilter = shapeFilter.replace(filter + " ", "");
      }
      console.log(shapeFilter);
    }
  });

li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='filter'>
  red green yellow
</div>
<ul class="dropdown-menu">
  <li class="cat-header">
    <strong>Category</strong>
  </li>
  <li>
    <a class="filter-link"> Red
            <input checked="true" class="cat-check" data-filter="red" data-type="color" type="Checkbox">
        </a>
  </li>
  <li>
    <a class="filter-link"> Green
            <input checked="true" class="cat-check" data-filter="green" data-type="color" type="Checkbox">
        </a>
  </li>
  <li>
    <a class="filter-link"> Yellow
            <input checked="true" class="cat-check" data-filter="yellow" data-type="color" type="Checkbox">
        </a>
  </li>
</ul>

Solution 2:

It turned out that if the checkbox was clicked rather than the a, the checked property would be switched before the method was being called thus giving the different values during runtime. The simple workaround is to trigger a click event on the checkbox when the a is clicked.

$('.filter-link').click(function(e) { 
    $(this).children("input").click();
});

Thanks to @Kevin for help and a more elegant solution than I originally developed.