title: How to identify what object triggered the jQuery click event within delegate code
body: <p>I have a very simple <a href="http://jsfiddle.net/BAaTk/" rel="nofollow">jsFiddle</a> that use jQuery caching and delegate. How can I make handler dynamic enough that when user clicks the first group checkbox, it highlights only the rows below it and when user selects the second group checkbox, it should select the rows below the second checkbox. </p>
  
  <p>I can have n groups and n rows under the group checkbox. For performance, I am trying to cache everything and then in handler I want to be able to select the desired group rows based on checkbox using designated classes to identify group. Also, I want to identify when user clicks on data cell.</p>
  
  <p>I tried different options to identify the object, by I guess obj.type doesn't return what I thought would give me the type. Any help would be much appreciated.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>var elements = $(".data");
  
  $("table").delegate("td", "click", function(evt){
      var obj = $(this);
  
      switch (obj.type) {
          case: "checkbox":
              //select all elements under this group
              elements.addClass('blue');
              break;
          case: "td":
              //I know this is not the right case, not sure how to trap a cell click
              //apply class 'red'
              break;
          default:
              elements.addClass('green');
              break;
      }    
  });
  </code></pre>
  
  <p><strong>Supporting HTML and CSS</strong></p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="checkbox" id="chkFirst" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
          &lt;td class="first"&gt;
              A
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
          &lt;td class="first"&gt;
              B
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
          &lt;td class="first"&gt;
              C
          &lt;/td&gt;
      &lt;/tr&gt;
       &lt;tr class="data"&gt;
          &lt;td&gt;
              &lt;input type="checkbox" id="chkSecond" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
          &lt;td class="second"&gt;
              Aa
          &lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr class="data"&gt;
          &lt;td class="second"&gt;
              Bb
          &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  .blue {
      color: blue;
  }
  .red {
      color: red;
  }
  .green {
      color: green;
  }
  </code></pre>