.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事件的默认处理程序是切换复选框。

＆＃13;

＆＃13;

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

};

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;