jquery - 如何选择或取消选择 JQuery Mobile 中的所有复选框？

Question

我有几个可折叠的复选框，并且正在尝试选中/取消选中该部分中的所有框。

HTML

目前，当我单击主复选框时，它只是打开和关闭可折叠对话框。

<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 代码似乎不起作用。

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

任何提示都会有帮助!

Answer 1

我不知道这个函数 ( fixContentHeight(); ) 正在做什么。

这样做，它会按预期工作。

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

对其他复选框部分遵循相同的方式。

引用LIVE DEMO

更新:

请引用我已经做了一些修改以适用于所有复选框部分的同一段代码，

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

HTML:

实际上在您的 HTML 上 <UL>标签丢失。

<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>

引用LIVE DEMO 2

更新2:

我已经检查了你的代码并修改了它。最后我得到了你的复选框问题。

您需要刷新 checkboxradio ，以更新所有复选框的选中值。

您需要使用:-

$("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");
});

引用LIVE DEMO 3