.prop() 不选择带有变量选择器的复选框
.prop() not selecting checkbox with variable selector
使用带有变量的 .prop() 作为 id 选择器时出现问题。最后，我希望在选中时选中复选框，在选中时取消选中复选框。
这是 state/city 列表的一部分，当您单击列表项父项时，该列表会折叠和展开。
Fiddle: 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;
});
已更新 fiddle：https://jsfiddle.net/fasr5frp/
绑定 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>
使用带有变量的 .prop() 作为 id 选择器时出现问题。最后，我希望在选中时选中复选框，在选中时取消选中复选框。
这是 state/city 列表的一部分，当您单击列表项父项时，该列表会折叠和展开。
Fiddle: 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;
});
已更新 fiddle：https://jsfiddle.net/fasr5frp/
绑定 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>