How to select or unselect all checkboxes in JQuery Mobile?

Question

I have several collapsible check-boxes, and am trying to check/uncheck all the boxes within that section.

HTML

Currently when I click on the main checkbox, it simply opens and closes the collapsible dialog.

<li data-role="collapsible" id="educationlayers">
            <h3>
                <input type="checkbox" name="education" id="education" class="layers"/>
                <label for="education">Education</label>
            </h3>
            <fieldset data-role="controlgroup">
                <input type="checkbox" data-mini="true" name="education" id="daycare" class="layers"/>
                <label for="daycare">Day Care</label>
                <input type="checkbox" data-mini="true" name="education" id="elementary" class="layers"/>
                <label for="elementary">Elementary</label>
                <input type="checkbox" data-mini="true" name="education" id="intermediate" class="layers"/>
                <label for="highschool">High School</label>
                <input type="checkbox" data-mini="true" name="education" id="postsecondary" class="layers"/>
                <label for="postsecondary">Post Secondary School</label>
            </fieldset>
         </li> 
         <li data-role="collapsible" id="emergencylayers">
               <h3>
                    <input type="checkbox" name="emergency" id="emergency" class="layers"/>
                    <label for="emergency">Emergency</label>
                </h3>
                <fieldset data-role="controlgroup">
                    <input type="checkbox" data-mini="true" name="emergency" id="ambulance" class="layers"/>
                    <label for="ambulance">Ambulance Station</label>
                    <input type="checkbox" data-mini="true" name="emergency" id="fire" class="layers"/>
                    <label for="fire">Fire Station</label>
                    <input type="checkbox" data-mini="true" name="emergency" id="hospital" class="layers"/>
                    <label for="hospital">Hospital</label>
                    <input type="checkbox" data-mini="true" name="emergency" id="police" class="layers"/>
                    <label for="police">Police</label>
                </fieldset>
          </li>
          <li data-role="collapsible" id="facilitieslayers">
                 <h3>
                    <input type="checkbox" name="facilities" id="facilities" class="layers"/>
                    <label for="facilities">Facilities</label>
                </h3>
                <fieldset data-role="controlgroup">
                    <input type="checkbox" data-mini="true" name="facilities" id="commerce" class="layers"/>
                    <label for="commerce">Chamber of Commerce</label>
                    <input type="checkbox" data-mini="true" name="facilities" id="cityfacility" class="layers"/>
                    <label for="cityfacility">City Facility</label>
                    <input type="checkbox" data-mini="true" name="facilities" id="cityhall" class="layers"/>
                    <label for="cityhall">City Hall</label>
                    <input type="checkbox" data-mini="true" name="facilities" id="govfacility" class="layers"/>
                    <label for="govfacility">Government Facility</label>
                </fieldset>
          </li>

JQuery

JQuery code that doesn't seem to work.

$(document).ready(function() {
    fixContentHeight();
    $('#education').click(function() {
        $("INPUT[name='education']").attr('checked', $('#education').is(':checked'));
    });
});

Any tips would be helpful!

Answer 1

I don't about what this function (fixContentHeight();) is doing.

Do this way, it works as expected.

//fixContentHeight();
$('#education').click(function() {
    $("INPUT[name='education']")
        .attr({
            checked: $('#education').is(':checked')
        });
});​

Follow the same fashion for other checkbox sections.

Refer LIVE DEMO

UPDATED:

Refer this same piece of code which I have done some modifications to works for all checkbox sections,

//fixContentHeight();
$('h3 input[type=checkbox]').click(function() {
    $("INPUT[name='"+this.name+"']")
        .attr({
            checked: $(this).is(':checked')
        });
});​

HTML:

Actually on your HTML <UL> tag is missing.

<ul>
    <li data-role="collapsible" id="educationlayers">
        <h3>
            <input type="checkbox" name="education" id="education" class="layers"/>
            <label for="education">Education</label>
        </h3>
        <fieldset data-role="controlgroup">
            <input type="checkbox" data-mini="true" name="education" id="daycare" class="layers"/>
            <label for="daycare">Day Care</label>
            <input type="checkbox" data-mini="true" name="education" id="elementary" class="layers"/>
            <label for="elementary">Elementary</label>
            <input type="checkbox" data-mini="true" name="education" id="intermediate" class="layers"/>
            <label for="highschool">High School</label>
            <input type="checkbox" data-mini="true" name="education" id="postsecondary" class="layers"/>
            <label for="postsecondary">Post Secondary School</label>
        </fieldset>
    </li>
    <li data-role="collapsible" id="emergencylayers">
        <h3>
            <input type="checkbox" name="emergency" id="emergency" class="layers"/>
            <label for="emergency">Emergency</label>
        </h3>
        <fieldset data-role="controlgroup">
            <input type="checkbox" data-mini="true" name="emergency" id="ambulance" class="layers"/>
            <label for="ambulance">Ambulance Station</label>
            <input type="checkbox" data-mini="true" name="emergency" id="fire" class="layers"/>
            <label for="fire">Fire Station</label>
            <input type="checkbox" data-mini="true" name="emergency" id="hospital" class="layers"/>
            <label for="hospital">Hospital</label>
            <input type="checkbox" data-mini="true" name="emergency" id="police" class="layers"/>
            <label for="police">Police</label>
        </fieldset>
    </li>
    <li data-role="collapsible" id="facilitieslayers">
        <h3>
            <input type="checkbox" name="facilities" id="facilities" class="layers"/>
            <label for="facilities">Facilities</label>
        </h3>
        <fieldset data-role="controlgroup">
            <input type="checkbox" data-mini="true" name="facilities" id="commerce" class="layers"/>
            <label for="commerce">Chamber of Commerce</label>
            <input type="checkbox" data-mini="true" name="facilities" id="cityfacility" class="layers"/>
            <label for="cityfacility">City Facility</label>
            <input type="checkbox" data-mini="true" name="facilities" id="cityhall" class="layers"/>
            <label for="cityhall">City Hall</label>
            <input type="checkbox" data-mini="true" name="facilities" id="govfacility" class="layers"/>
            <label for="govfacility">Government Facility</label>
        </fieldset>
    </li>
</ul>

Refer LIVE DEMO 2

UPDATED 2:

I have gone through your code and modified it. Finally I got your issue with the checkboxes.

You need to refresh the checkboxradio, to get updated with checked value of all checkboxes.

You need to use:-

$("input[name='"+this.name+"']").checkboxradio("refresh");

JS:

$('h3 input[type=checkbox]').click(function() {
    $("input[name='"+this.name+"']")
        .attr({
            checked: $(this).is(':checked')
        });
    $("input[name='"+this.name+"']").checkboxradio("refresh");
});

Refer LIVE DEMO 3