.prop（）変数セレクタでチェックボックスを選択しない

Question

idセレクタとして変数を指定して.prop（）を使用すると問題が発生します。最終的には、チェックボックスをオンにすると、チェックボックスをオンにし、オンにするとオフにします。

これは、リストアイテムの親をクリックすると、折りたたまれ展開される州/市リストの一部です。

フィドル：https://jsfiddle.net/xeud8khg/

$('#expList input:checkbox').unbind('click').click(function() { 
var clicked = "#" + event.target.id; 
$(clicked).prop('checked', true); 
console.log(clicked); //To see that the right id was selected. 
return false; 
}); 

更新：ラベル上のチェックボックスとクリックのトグルを追加するBarmarの答えを使用します。私は、クリーンな方法があると確信しているが、これは働いていた：

//Fake checkbox 
$('#expList input:checkbox').off('mouseup').mouseup(function(event) { 
var clicked = "#" + event.target.id; 
if ($(clicked).is(':checked')) 
     $(clicked).prop('checked', false); 
    else 
     ($(clicked).prop('checked', true)); 
return false; 
}); 

//Fake label 
$('#expList label').off('mouseup').mouseup(function(event) { 
labelID = "#" + $(this).attr('for'); 
if ($(labelID).is(':checked')) 
     $(labelID).prop('checked', false); 
    else 
     ($(labelID).prop('checked', true)); 
return false; 
}); 

更新フィドル：https://jsfiddle.net/fasr5frp/

Answer 1

代わりのclick、バインドmouseupを結合します。 mouseupイベントのデフォルトのハンドラは、チェックボックスを切り替えることです。

$(document).ready(function() { 
 
    locationsList() 
 
}); 
 

 
function locationsList() { 
 
    $('#expList').find('li:has(ul)').off('click').click(function(event) { 
 
    if (this == event.target) { 
 
     $(this).toggleClass('expanded'); 
 
     $(this).children('ul').toggle('medium'); 
 
    } 
 
    return false; 
 
    }).addClass('collapsed').removeClass('expanded').children('ul').hide(); 
 

 
    //Hack to add links inside the cv 
 
    $('#expList input:checkbox').off('mouseup').mouseup(function(event) { 
 
    var clicked = "#" + event.target.id; 
 
    $(clicked).prop('checked', true); 
 
    console.log(clicked); //To see that the right id was selected. 
 
    return false; 
 
    }); 
 

 
};

#listContainer { 
 
    margin-top: 15px; 
 
} 
 
#expList ul, 
 
li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
} 
 
#expList p { 
 
    margin: 0; 
 
    display: block; 
 
} 
 
#expList p:hover { 
 
    background-color: #121212; 
 
} 
 
#expList li { 
 
    line-height: 140%; 
 
    text-indent: 0px; 
 
    background-position: 1px 8px; 
 
    padding-left: 20px; 
 
    background-repeat: no-repeat; 
 
} 
 
/* Collapsed state for list element */ 
 

 
#expList .collapsed {} 
 
/* Expanded state for list element 
 
/* NOTE: This class must be located UNDER the collapsed one */ 
 

 
#expList .expanded {} .listControl { 
 
    margin-bottom: 15px; 
 
} 
 
.listControl a { 
 
    border: 1px solid #555555; 
 
    color: #555555; 
 
    cursor: pointer; 
 
    height: 1.5em; 
 
    line-height: 1.5em; 
 
    margin-right: 5px; 
 
    padding: 4px 10px; 
 
} 
 
.listControl a:hover { 
 
    background-color: #555555; 
 
    color: #222222; 
 
    font-weight: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="listContainer"> 
 
    <ul id="expList"> 
 
    <li class="collapsed expanded">Connecticut 
 
     <ul> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Danbury" id="Connecticut_Danbury"> 
 
      <label for="Connecticut_Danbury">Danbury</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Bristol" id="Connecticut_Bristol"> 
 
      <label for="Connecticut_Bristol">Bristol</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Enfield" id="Connecticut_Enfield"> 
 
      <label for="Connecticut_Enfield">Enfield</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Hartford" id="Connecticut_Hartford"> 
 
      <label for="Connecticut_Hartford">Hartford</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Newington" id="Connecticut_Newington"> 
 
      <label for="Connecticut_Newington">Newington</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_North Haven" id="Connecticut_North Haven"> 
 
      <label for="Connecticut_North Haven">North Haven</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Norwalk" id="Connecticut_Norwalk"> 
 
      <label for="Connecticut_Norwalk">Norwalk</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Orange" id="Connecticut_Orange"> 
 
      <label for="Connecticut_Orange">Orange</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_South Windsor" id="Connecticut_South Windsor"> 
 
      <label for="Connecticut_South Windsor">South Windsor</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Stratford" id="Connecticut_Stratford"> 
 
      <label for="Connecticut_Stratford">Stratford</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Torrington" id="Connecticut_Torrington"> 
 
      <label for="Connecticut_Torrington">Torrington</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Waterbury" id="Connecticut_Waterbury"> 
 
      <label for="Connecticut_Waterbury">Waterbury</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_West Haven" id="Connecticut_West Haven"> 
 
      <label for="Connecticut_West Haven">West Haven</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Windsor" id="Connecticut_Windsor"> 
 
      <label for="Connecticut_Windsor">Windsor</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Connecticut_Wethersfield" id="Connecticut_Wethersfield"> 
 
      <label for="Connecticut_Wethersfield">Wethersfield</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">New York 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Albany" id="New York_Albany"> 
 
      <label for="New York_Albany">Albany</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Amityville" id="New York_Amityville"> 
 
      <label for="New York_Amityville">Amityville</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Batavia" id="New York_Batavia"> 
 
      <label for="New York_Batavia">Batavia</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Bay Shore" id="New York_Bay Shore"> 
 
      <label for="New York_Bay Shore">Bay Shore</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Bohemia" id="New York_Bohemia"> 
 
      <label for="New York_Bohemia">Bohemia</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Bronx" id="New York_Bronx"> 
 
      <label for="New York_Bronx">Bronx</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Brooklyn" id="New York_Brooklyn"> 
 
      <label for="New York_Brooklyn">Brooklyn</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_CedarHurst" id="New York_CedarHurst"> 
 
      <label for="New York_CedarHurst">CedarHurst</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Cicero" id="New York_Cicero"> 
 
      <label for="New York_Cicero">Cicero</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Commack" id="New York_Commack"> 
 
      <label for="New York_Commack">Commack</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Elmira" id="New York_Elmira"> 
 
      <label for="New York_Elmira">Elmira</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Fairmount" id="New York_Fairmount"> 
 
      <label for="New York_Fairmount">Fairmount</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Farmingdale" id="New York_Farmingdale"> 
 
      <label for="New York_Farmingdale">Farmingdale</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Fayetteville" id="New York_Fayetteville"> 
 
      <label for="New York_Fayetteville">Fayetteville</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Glendale" id="New York_Glendale"> 
 
      <label for="New York_Glendale">Glendale</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Hempstead" id="New York_Hempstead"> 
 
      <label for="New York_Hempstead">Hempstead</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Hewlett" id="New York_Hewlett"> 
 
      <label for="New York_Hewlett">Hewlett</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Hyde Park" id="New York_Hyde Park"> 
 
      <label for="New York_Hyde Park">Hyde Park</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Ithaca" id="New York_Ithaca"> 
 
      <label for="New York_Ithaca">Ithaca</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Jamestown" id="New York_Jamestown"> 
 
      <label for="New York_Jamestown">Jamestown</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Kew Gardens Hills" id="New York_Kew Gardens Hills"> 
 
      <label for="New York_Kew Gardens Hills">Kew Gardens Hills</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Kingston" id="New York_Kingston"> 
 
      <label for="New York_Kingston">Kingston</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Lake Grove" id="New York_Lake Grove"> 
 
      <label for="New York_Lake Grove">Lake Grove</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Laurelton" id="New York_Laurelton"> 
 
      <label for="New York_Laurelton">Laurelton</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Lindenhurst" id="New York_Lindenhurst"> 
 
      <label for="New York_Lindenhurst">Lindenhurst</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Middletown" id="New York_Middletown"> 
 
      <label for="New York_Middletown">Middletown</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Mineola" id="New York_Mineola"> 
 
      <label for="New York_Mineola">Mineola</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Nanuet" id="New York_Nanuet"> 
 
      <label for="New York_Nanuet">Nanuet</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_New Windsor" id="New York_New Windsor"> 
 
      <label for="New York_New Windsor">New Windsor</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_New York" id="New York_New York"> 
 
      <label for="New York_New York">New York</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Queens" id="New York_Queens"> 
 
      <label for="New York_Queens">Queens</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Rochester" id="New York_Rochester"> 
 
      <label for="New York_Rochester">Rochester</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Staten Island" id="New York_Staten Island"> 
 
      <label for="New York_Staten Island">Staten Island</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Wappingers Falls" id="New York_Wappingers Falls"> 
 
      <label for="New York_Wappingers Falls">Wappingers Falls</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_White Plains" id="New York_White Plains"> 
 
      <label for="New York_White Plains">White Plains</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Yonkers" id="New York_Yonkers"> 
 
      <label for="New York_Yonkers">Yonkers</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Buffalo" id="New York_Buffalo"> 
 
      <label for="New York_Buffalo">Buffalo</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Syosset" id="New York_Syosset"> 
 
      <label for="New York_Syosset">Syosset</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Carle Place" id="New York_Carle Place"> 
 
      <label for="New York_Carle Place">Carle Place</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Massapequa" id="New York_Massapequa"> 
 
      <label for="New York_Massapequa">Massapequa</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New York_Yorktown Heights" id="New York_Yorktown Heights"> 
 
      <label for="New York_Yorktown Heights">Yorktown Heights</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">New Jersey 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Basking Ridge" id="New Jersey_Basking Ridge"> 
 
      <label for="New Jersey_Basking Ridge">Basking Ridge</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Bayonne" id="New Jersey_Bayonne"> 
 
      <label for="New Jersey_Bayonne">Bayonne</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Belleville" id="New Jersey_Belleville"> 
 
      <label for="New Jersey_Belleville">Belleville</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Brick" id="New Jersey_Brick"> 
 
      <label for="New Jersey_Brick">Brick</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Cherry Hill" id="New Jersey_Cherry Hill"> 
 
      <label for="New Jersey_Cherry Hill">Cherry Hill</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Cinnaminson" id="New Jersey_Cinnaminson"> 
 
      <label for="New Jersey_Cinnaminson">Cinnaminson</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Fort Lee" id="New Jersey_Fort Lee"> 
 
      <label for="New Jersey_Fort Lee">Fort Lee</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Hazlet" id="New Jersey_Hazlet"> 
 
      <label for="New Jersey_Hazlet">Hazlet</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Hoboken" id="New Jersey_Hoboken"> 
 
      <label for="New Jersey_Hoboken">Hoboken</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Jersey City" id="New Jersey_Jersey City"> 
 
      <label for="New Jersey_Jersey City">Jersey City</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Lakewood" id="New Jersey_Lakewood"> 
 
      <label for="New Jersey_Lakewood">Lakewood</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Lodi" id="New Jersey_Lodi"> 
 
      <label for="New Jersey_Lodi">Lodi</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Long Branch" id="New Jersey_Long Branch"> 
 
      <label for="New Jersey_Long Branch">Long Branch</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Manalapan" id="New Jersey_Manalapan"> 
 
      <label for="New Jersey_Manalapan">Manalapan</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Mt. Ephraim" id="New Jersey_Mt. Ephraim"> 
 
      <label for="New Jersey_Mt. Ephraim">Mt. Ephraim</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Newark" id="New Jersey_Newark"> 
 
      <label for="New Jersey_Newark">Newark</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Old Bridge" id="New Jersey_Old Bridge"> 
 
      <label for="New Jersey_Old Bridge">Old Bridge</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Paramus" id="New Jersey_Paramus"> 
 
      <label for="New Jersey_Paramus">Paramus</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_South Plainfield" id="New Jersey_South Plainfield"> 
 
      <label for="New Jersey_South Plainfield">South Plainfield</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Springfield" id="New Jersey_Springfield"> 
 
      <label for="New Jersey_Springfield">Springfield</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Swedesboro" id="New Jersey_Swedesboro"> 
 
      <label for="New Jersey_Swedesboro">Swedesboro</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Toms River" id="New Jersey_Toms River"> 
 
      <label for="New Jersey_Toms River">Toms River</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Totowa" id="New Jersey_Totowa"> 
 
      <label for="New Jersey_Totowa">Totowa</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Turnersville" id="New Jersey_Turnersville"> 
 
      <label for="New Jersey_Turnersville">Turnersville</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Watchung" id="New Jersey_Watchung"> 
 
      <label for="New Jersey_Watchung">Watchung</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_West Caldwell" id="New Jersey_West Caldwell"> 
 
      <label for="New Jersey_West Caldwell">West Caldwell</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_West Orange" id="New Jersey_West Orange"> 
 
      <label for="New Jersey_West Orange">West Orange</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Moorestown" id="New Jersey_Moorestown"> 
 
      <label for="New Jersey_Moorestown">Moorestown</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="New Jersey_Clifton" id="New Jersey_Clifton"> 
 
      <label for="New Jersey_Clifton">Clifton</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">Massachusetts 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Billerica" id="Massachusetts_Billerica"> 
 
      <label for="Massachusetts_Billerica">Billerica</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Cambridge" id="Massachusetts_Cambridge"> 
 
      <label for="Massachusetts_Cambridge">Cambridge</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_East Longmeadow" id="Massachusetts_East Longmeadow"> 
 
      <label for="Massachusetts_East Longmeadow">East Longmeadow</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Framingham" id="Massachusetts_Framingham"> 
 
      <label for="Massachusetts_Framingham">Framingham</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Lexington" id="Massachusetts_Lexington"> 
 
      <label for="Massachusetts_Lexington">Lexington</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Needham" id="Massachusetts_Needham"> 
 
      <label for="Massachusetts_Needham">Needham</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Norwell" id="Massachusetts_Norwell"> 
 
      <label for="Massachusetts_Norwell">Norwell</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Peabody" id="Massachusetts_Peabody"> 
 
      <label for="Massachusetts_Peabody">Peabody</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_South Dennis" id="Massachusetts_South Dennis"> 
 
      <label for="Massachusetts_South Dennis">South Dennis</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Tewskbury" id="Massachusetts_Tewskbury"> 
 
      <label for="Massachusetts_Tewskbury">Tewskbury</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Massachusetts_Worcester" id="Massachusetts_Worcester"> 
 
      <label for="Massachusetts_Worcester">Worcester</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">Ohio 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Ohio_Cleveland" id="Ohio_Cleveland"> 
 
      <label for="Ohio_Cleveland">Cleveland</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">Florida 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Florida_Fort Myers" id="Florida_Fort Myers"> 
 
      <label for="Florida_Fort Myers">Fort Myers</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Florida_Jacksonville" id="Florida_Jacksonville"> 
 
      <label for="Florida_Jacksonville">Jacksonville</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Florida_St. Petersburg" id="Florida_St. Petersburg"> 
 
      <label for="Florida_St. Petersburg">St. Petersburg</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Florida_Miami" id="Florida_Miami"> 
 
      <label for="Florida_Miami">Miami</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Florida_Fort Lauderdale" id="Florida_Fort Lauderdale"> 
 
      <label for="Florida_Fort Lauderdale">Fort Lauderdale</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Florida_Tampa" id="Florida_Tampa"> 
 
      <label for="Florida_Tampa">Tampa</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">Pennsylvania 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Pennsylvania_Philadelphia" id="Pennsylvania_Philadelphia"> 
 
      <label for="Pennsylvania_Philadelphia">Philadelphia</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Pennsylvania_Pittsburgh" id="Pennsylvania_Pittsburgh"> 
 
      <label for="Pennsylvania_Pittsburgh">Pittsburgh</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Pennsylvania_Scranton" id="Pennsylvania_Scranton"> 
 
      <label for="Pennsylvania_Scranton">Scranton</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">Rhode Island 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Rhode Island_Warwick" id="Rhode Island_Warwick"> 
 
      <label for="Rhode Island_Warwick">Warwick</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">District of Columbia 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="District of Columbia_Washington, DC" id="District of Columbia_Washington, DC"> 
 
      <label for="District of Columbia_Washington, DC">Washington, DC</label> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="collapsed">Texas 
 
     <ul style="display: none;"> 
 
     <li> 
 
      <input type="checkbox" name="location[]" value="Texas_Houston" id="Texas_Houston"> 
 
      <label for="Texas_Houston">Houston</label> 
 
     </li> 
 
     </ul> 
 
    </li><pre></pre> 
 
    </ul> 
 
</div>

は