1

特定のチェックボックスをグループ化して折りたたみ可能にし、すべてを選択/選択解除したいと思います。

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>

JQuery

$(document).ready(function () {
    fixContentHeight();
    $('.layers').click(changeLayers);
});

function changeLayers () {
    var checked = [];
    $('.layers').each(function () {
        if ($(this).attr('checked')) {
            checked.push($(this).attr('value'));
        }
    });
    mainLayer.params.LAYERS = checked.join(",");
    mainLayer.redraw();
}

$('#education').click(function() {
    $("INPUT[type='checkbox']").attr('checked', $('#education').is(':checked'));
});

教育チェックボックス内で育児と高校を統合できるようにしようとしています。

4

1 に答える 1

0

で順序付けされていないリストを使用し、要素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を微調整して修正することができます

于 2012-06-30T06:41:42.633 に答える