title: Get Checkbox to toggle div based on only the string inside a checkbox's label - jQuery
body: <p>I'm trying to create a script to hide divs based on just the label of a "checked" checkbox. And do it without having to use a specific value, id or attribute. I was previously shown how to <a href="https://stackoverflow.com/questions/23583040/jquery-use-the-text-of-an-element-to-toggle-another-element-that-contains-the-sa">do it using spans/divs</a>, but checkboxes have got me stumped.</p>
  
  <p>My example in jsfiddle:
  <a href="http://jsfiddle.net/6qLX7/2/" rel="nofollow noreferrer">http://jsfiddle.net/6qLX7/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;fieldset class="filter-row"&gt;
  &lt;div class="row-section"&gt;
      &lt;div class="row-heading"&gt;art&lt;/div&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="checkbox" name="studio art" value=".studio_art" id="studio_art" /&gt;
                  &lt;label for="studio_art"&gt;studio art&lt;/label&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="checkbox" name="ceramics" value=".ceramics" id="ceramics" /&gt;
                  &lt;label for="ceramics"&gt;ceramics&lt;/label&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;fieldset class="filter-row"&gt;
  &lt;div class="row-section"&gt;
      &lt;div class="row-heading"&gt;studio art&lt;/div&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="button" value=".option1" name="option1" id="option1" /&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="button" value=".option2" name="option2" id="option2" /&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="row-section "&gt;
      &lt;div class="row-heading"&gt;ceramics&lt;/div&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="button" value=".option1" name="option1" id="option1" /&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="button" value=".option2" name="option2" id="option2" /&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
  $("input:checked").click(function () {
      var clickedText = $(this).text();
      $(".row-section").filter(function () {
          return $(this).find("div").text() === clickedText;
      }).toggle();
  });
  });
  </code></pre>