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

html5中的input和label写法与取值的更多相关文章

  1. php的form中元素name属性相同时的取值问题

    php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...

  2. 在LoadRunner中从数组类型的参数随机取值的方法

    在LoadRunner中从数组类型的参数随机取值的方法 使用web_reg_save_param做关联后,有时候会有多个匹配值. 为了模仿用户行为随机取一个值为后续transcation所用,可以使用 ...

  3. html5中关于input使用方法的改变

    測试环境:Firefox 10.0.Safari 5.1.Opera 11.61, Chrome 14.0.835.202 自己測试的时候都有写在form表单里,有提交button验证.由于对博客使用 ...

  4. Java 中日期的几种常见操作 —— 取值、转换、加减、比较

    Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...

  5. Gridview中DataKeyNames 设置多个主键 取值

    1.设置DataKeyNames a.F4  在属性面板中设置   多个值以逗号隔开  例如id,mane,sex b.通过后台代码 this.gridview.DataSource = Bind() ...

  6. Handlebars.js中集合(list)通过中括号的方式取值

    有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如: <table> <thead> <tr> {{#ea ...

  7. 聊聊 Java 中日期的几种常见操作 —— 取值、转换、加减、比较

    Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...

  8. DataList:HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

  9. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

随机推荐

  1. 洛谷.1333.瑞瑞的木棍(欧拉路径 Hash)

    题目链接 #include <cstdio> #include <cstring> const int N=2e6+5,M=5e5+5,mod=2e6; const int s ...

  2. 洛谷.1501.[国家集训队]Tree II(LCT)

    题目链接 日常zz被define里没取模坑 //标记下放同线段树 注意51061^2 > 2147483647,要开unsigned int //*sz[]别忘了.. #include < ...

  3. PAT-A1135. Is It A Red-Black Tree (30)

    已知先序序列,判断对应的二叉排序树是否为红黑树.序列中负数表示红色结点,正数表示黑色结点.该序列负数取绝对值后再排序得到的是中序序列.根据红黑树的性质判断它是否符合红黑树的要求.考察了根据先序序列和中 ...

  4. linux -- 查看磁盘空间的大小

    Ubuntu 查看磁盘空间大小命令 df -h Df命令是linux系统以磁盘分区为单位查看文件系统,可以加上参数查看磁盘剩余空间信息, 命令格式: df -hl  显示格式为:  文件系统 容量 已 ...

  5. Knockout.Js官网学习(Mapping插件)

    前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...

  6. .Net Core Base64加密解密

    一.Base64说明 1..Net Core中的Base64位加密解密和.Net Framework使用方式相同 2. Convert 类中提供了Base64位转码方法 Base64是网络上最常见的用 ...

  7. 【NLP】Python实例:基于文本相似度对申报项目进行查重设计

    Python实例:申报项目查重系统设计与实现 作者:白宁超 2017年5月18日17:51:37 摘要:关于查重系统很多人并不陌生,无论本科还是硕博毕业都不可避免涉及论文查重问题,这也对学术不正之风起 ...

  8. sed学习[参考转载]

    一.选项与参数: -n :使用安静(silent)模式.在一般 sed 的用法中,所有来自 STDIN 的数据一般都会被列出到终端上.但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者 ...

  9. linux达人养成计划学习笔记(七)—— 用户登录查看命令

    一.查看用户登录信息 1.命令格式 w 2.命令结果 第一行信息是:系统当前时间     系统运行总时间     登录用户数量     一分钟/五分钟/十分钟的系统负载(越大越差) 二.who命令 1 ...

  10. Linux 系统实时监控的瑞士军刀 —— Glances

    Linux 系统实时监控的瑞士军刀 —— Glances 对于 RHEL/CentOS/Fedora 发行版 ## RHEL/CentOS 7 64-Bit ## # wget http://dl.f ...