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上就不是響應兩次了。。