html5中的input和label写法与取值

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上就不是响应两次了。。