demo 效果图如上
label是html5特有的，是定义 input 元素的标注。
凡是input前面要有个label标识下，label和input真是一对好兄弟啊。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<div class="blocks mgtop0 brdbtm0 clearFix">
<div class="addareaBox">
<label class="stateTitle"><em class="redStar">*</em>国家</label>
<ul class="listInfoUl">
<li id="states" class="statesLi">
<label class="arealabel" for="areaInput0">
<input type="checkbox" name="areaInputConts" id="areaInput0" value="9">法国</label>
<label class="arealabel" for="areaInput1">
<input type="checkbox" name="areaInputConts" id="areaInput1" value="10">比利时</label>
</li>
</ul>
</div> <div class="addareaBox">
<label><em class="redStar">*</em>城市</label>
<ul class="listInfoUl">
<li id="areaInput0-citys" class="citysLi">
<label class="arealabel all">法国</label>
<label class="arealabel" for="areaInput0-citys-Input0">
<input type="checkbox" name="areaInputCitys" id="areaInput0-citys-Input0" value="27">尼斯</label>
<label class="arealabel" for="areaInput0-citys-Input1">
<input type="checkbox" name="areaInputCitys" id="areaInput0-citys-Input1" value="26">巴黎</label>
<label class="arealabel" for="areaInput0-citys-Input2">
<input type="checkbox" name="areaInputCitys" id="areaInput0-citys-Input2" value="28">马赛</label>
</li>
<li id="areaInput1-citys" class="citysLi">
<label class="arealabel all">比利时</label>
<label class="arealabel" for="areaInput1-citys-Input0">
<input type="checkbox" name="areaInputCitys" id="areaInput1-citys-Input0" value="82">安特卫普</label>
<label class="arealabel" for="areaInput1-citys-Input1">
<input type="checkbox" name="areaInputCitys" id="areaInput1-citys-Input1" value="83">西弗兰德</label>
<label class="arealabel" for="areaInput1-citys-Input2">
<input type="checkbox" name="areaInputCitys" id="areaInput1-citys-Input2" value="84">东弗兰德</label>
</li>
</ul>
</div>
</div>
通过lable来控制 input的样式和选择状态。
.newCityguide .addareaBox li .arealabel.checked {
background-color: #e93854;
color: #fff;
}
.newCityguide .addareaBox li .arealabel {
display: inline-block;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding-bottom: 0.25em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.25em;
width: auto;
}
通过下面两行，获取input的上一级 label
thisstatelabelDoms = $(".arealabel");
console.log("thisstatelabelDoms:"+thisstatelabelDoms);
然后通过绑定click事件，实现选择与否的状态切换
thisstatelabelDoms.click(function(){});
核心代码如下：
//也不是没有bug，好像初始加载后，头次需要点两次才能实现checked状态的切换。
var thisstatelabelDoms;
if(conid){
thisstatelabelDoms = $(conid).find(".arealabel");
console.log("thisstatelabelDoms-confid:"+thisstatelabelDoms);
}else{
//input 上一级 label
thisstatelabelDoms = $(".arealabel");
console.log("thisstatelabelDoms:"+thisstatelabelDoms);
}
//国家的父ID是states ；城市父ID是areaInput0-citys
var statesId = $(this).parent().attr("id");
var thisInpt = $(this).find("input[type=checkbox]");
//状态
var thisinptckeck= thisInpt.attr("checked");
var contname=$(this).parent().html();
if(thisinptckeck=="checked"){
$(this).addClass("checked");
if(statesId=="states"){
var thisInptId = thisInpt.attr("id");
$("#"+thisInptId+"-citys").show();
}
$("#inputHidden").val(getCheckboxV);
}else{
$(this).removeClass("checked");
if(statesId=="states"){
var thisInptId = thisInpt.attr("id");
$("#"+thisInptId+"-citys").hide();
$("#"+thisInptId+"-citys").find("label input[type=checkbox]").each(function(k,n){
$(n).attr("checked",false);
$(n).parent().removeClass("checked");
});
}
$("#inputHidden").val(getCheckboxV);
}
通过getCheckboxV函数，遍历获取选择的国家和城市ID
function getCheckboxV(selecter){
var thisSelecterDoms;
var thisSelecterContDoms;
var thisStr="";
if(selecter){
thisSelecterDoms = $(selecter);
$(thisSelecterDoms).each(function(){
if($(this).find("input[type=checkbox]:checked").val() != undefined){
thisStr+=$(this).find("input[type=checkbox]:checked").val()+",";
}
});
}else{
//cont id
//注意同类input的写法$("input[name=areaInputConts]:checked")，name相同 checked状态相同
thisSelecterContDoms = $("input[name=areaInputConts]:checked");
$(thisSelecterContDoms).each(function(){
if($(this).val() != undefined){
//判断国家下是否有城市，没选城市flag=true，勾选了flag=false
var flag=true;
var thisContId = $(this).attr("id");
$("#"+thisContId+"-citys").find("label input[type=checkbox]").each(function(k,n){
if($(n).attr("checked")=="checked") {
flag=false;
}
}
);
if(flag){
thisStr+=$(this).val()+",";
}
}
});
//city id
thisSelecterDoms = $("input[name=areaInputCitys]:checked");
$(thisSelecterDoms).each(function(){
if($(this).val() != undefined){
thisStr+=$(this).val()+",";
}
});
}
return thisStr;
}
也不是没有bug，好像初始加载后，头次需要点两次才能实现checked状态的切换。出现这样的问题，是因为click绑定在了label上了，改绑定到input上就不是响应两次了。。