Jquery mobile 如何使用jquery mobile制作可折叠复选框？

我想对某些复选框进行分组，使其可折叠，并选择/取消选择所有复选框

HTML

<div style="padding-left: 5px; padding-right: 5px">
 <fieldset data-role="controlgroup"> 
  <input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
  <label for="land">Land Parcels</label> 
  <input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
  <label for="road">Roads</label> 
  <input autocomplete="off" type="checkbox" name="layers" id="rail"  class="layers" checked="checked"/>
  <label for="rail">Railroads</label> 
input autocomplete="off" type="checkbox" name="layers" id="lake"  class="layers" checked="checked"/>
  <label for="lake">Lakes</label>
  <input autocomplete="off" type="checkbox" name="layers" id="points" class="layers"/>
  <label for="points">AMIS Points</label>
  <input autocomplete="off" type="checkbox" name="education" id="education" class="layers"/>
  <label for="education">Education</label>
    <input autocomplete="off" type="checkbox" data-mini="true" name="education" id="childcare" class="layers"/>
    <label for="childcare">Child Care</label>
    <input autocomplete="off" type="checkbox" data-mini="true" name="education" id="highschool" class="layers"/>
    <label for="highschool">High School</label>
    <input autocomplete="off" type="checkbox" name="layers" id="stormpipes" class="layers"/>
  <label for="stormpipes">Storm Pipes</label>
 </fieldset>
</div>

---

试图使儿童保育和高中教育在教育复选框内可折叠

您可以将无序列表与

data role=“listview”

一起使用，将

data role=“collapsible”

添加到

li

元素中，并将另一个无序列表与内部列表的

li

中的每个复选框嵌套在一起

<ul data-role="listview">
    <li data-role="collapsible">
        <h3>Title of collapsible row</h3>
        <ul data-role="listview">
            <li>
                <input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
                <label for="land">Land Parcels</label> 
            </li>
            <li>
                <input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
                <label for="road">Roads</label> 
            </li>
        </ul>
    </li>
</ul>

可折叠行的标题


地块


道路

边距和填充看起来有点奇怪，但是你可以调整css来解决这个问题

<ul data-role="listview">
    <li data-role="collapsible">
        <h3>Title of collapsible row</h3>
        <ul data-role="listview">
            <li>
                <input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
                <label for="land">Land Parcels</label> 
            </li>
            <li>
                <input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
                <label for="road">Roads</label> 
            </li>
        </ul>
    </li>
</ul>