title: How to select or unselect all checkboxes in JQuery Mobile?
body: <p>I have several collapsible check-boxes, and am trying to check/uncheck all the boxes within that section.</p>
  
  <p><strong>HTML</strong></p>
  
  <p>Currently when I click on the main checkbox, it simply opens and closes the collapsible dialog.</p>
  
  <pre><code>&lt;li data-role="collapsible" id="educationlayers"&gt;
              &lt;h3&gt;
                  &lt;input type="checkbox" name="education" id="education" class="layers"/&gt;
                  &lt;label for="education"&gt;Education&lt;/label&gt;
              &lt;/h3&gt;
              &lt;fieldset data-role="controlgroup"&gt;
                  &lt;input type="checkbox" data-mini="true" name="education" id="daycare" class="layers"/&gt;
                  &lt;label for="daycare"&gt;Day Care&lt;/label&gt;
                  &lt;input type="checkbox" data-mini="true" name="education" id="elementary" class="layers"/&gt;
                  &lt;label for="elementary"&gt;Elementary&lt;/label&gt;
                  &lt;input type="checkbox" data-mini="true" name="education" id="intermediate" class="layers"/&gt;
                  &lt;label for="highschool"&gt;High School&lt;/label&gt;
                  &lt;input type="checkbox" data-mini="true" name="education" id="postsecondary" class="layers"/&gt;
                  &lt;label for="postsecondary"&gt;Post Secondary School&lt;/label&gt;
              &lt;/fieldset&gt;
           &lt;/li&gt; 
           &lt;li data-role="collapsible" id="emergencylayers"&gt;
                 &lt;h3&gt;
                      &lt;input type="checkbox" name="emergency" id="emergency" class="layers"/&gt;
                      &lt;label for="emergency"&gt;Emergency&lt;/label&gt;
                  &lt;/h3&gt;
                  &lt;fieldset data-role="controlgroup"&gt;
                      &lt;input type="checkbox" data-mini="true" name="emergency" id="ambulance" class="layers"/&gt;
                      &lt;label for="ambulance"&gt;Ambulance Station&lt;/label&gt;
                      &lt;input type="checkbox" data-mini="true" name="emergency" id="fire" class="layers"/&gt;
                      &lt;label for="fire"&gt;Fire Station&lt;/label&gt;
                      &lt;input type="checkbox" data-mini="true" name="emergency" id="hospital" class="layers"/&gt;
                      &lt;label for="hospital"&gt;Hospital&lt;/label&gt;
                      &lt;input type="checkbox" data-mini="true" name="emergency" id="police" class="layers"/&gt;
                      &lt;label for="police"&gt;Police&lt;/label&gt;
                  &lt;/fieldset&gt;
            &lt;/li&gt;
            &lt;li data-role="collapsible" id="facilitieslayers"&gt;
                   &lt;h3&gt;
                      &lt;input type="checkbox" name="facilities" id="facilities" class="layers"/&gt;
                      &lt;label for="facilities"&gt;Facilities&lt;/label&gt;
                  &lt;/h3&gt;
                  &lt;fieldset data-role="controlgroup"&gt;
                      &lt;input type="checkbox" data-mini="true" name="facilities" id="commerce" class="layers"/&gt;
                      &lt;label for="commerce"&gt;Chamber of Commerce&lt;/label&gt;
                      &lt;input type="checkbox" data-mini="true" name="facilities" id="cityfacility" class="layers"/&gt;
                      &lt;label for="cityfacility"&gt;City Facility&lt;/label&gt;
                      &lt;input type="checkbox" data-mini="true" name="facilities" id="cityhall" class="layers"/&gt;
                      &lt;label for="cityhall"&gt;City Hall&lt;/label&gt;
                      &lt;input type="checkbox" data-mini="true" name="facilities" id="govfacility" class="layers"/&gt;
                      &lt;label for="govfacility"&gt;Government Facility&lt;/label&gt;
                  &lt;/fieldset&gt;
            &lt;/li&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <p>JQuery code that doesn't seem to work.</p>
  
  <pre><code>$(document).ready(function() {
      fixContentHeight();
      $('#education').click(function() {
          $("INPUT[name='education']").attr('checked', $('#education').is(':checked'));
      });
  });
  </code></pre>
  
  <p>Any tips would be helpful!</p>