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上就不是响应两次了。。
html5中的input和label写法与取值的更多相关文章
- php的form中元素name属性相同时的取值问题
php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...
- 在LoadRunner中从数组类型的参数随机取值的方法
在LoadRunner中从数组类型的参数随机取值的方法 使用web_reg_save_param做关联后,有时候会有多个匹配值. 为了模仿用户行为随机取一个值为后续transcation所用,可以使用 ...
- html5中关于input使用方法的改变
測试环境:Firefox 10.0.Safari 5.1.Opera 11.61, Chrome 14.0.835.202 自己測试的时候都有写在form表单里,有提交button验证.由于对博客使用 ...
- Java 中日期的几种常见操作 —— 取值、转换、加减、比较
Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...
- Gridview中DataKeyNames 设置多个主键 取值
1.设置DataKeyNames a.F4 在属性面板中设置 多个值以逗号隔开 例如id,mane,sex b.通过后台代码 this.gridview.DataSource = Bind() ...
- Handlebars.js中集合(list)通过中括号的方式取值
有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如: <table> <thead> <tr> {{#ea ...
- 聊聊 Java 中日期的几种常见操作 —— 取值、转换、加减、比较
Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...
- DataList:HTML5中的input输入框自动提示宝器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...
- HTML5中的input type为file控件限制上传文件类型及扩展
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...
随机推荐
- 洛谷.1333.瑞瑞的木棍(欧拉路径 Hash)
题目链接 #include <cstdio> #include <cstring> const int N=2e6+5,M=5e5+5,mod=2e6; const int s ...
- 洛谷.1501.[国家集训队]Tree II(LCT)
题目链接 日常zz被define里没取模坑 //标记下放同线段树 注意51061^2 > 2147483647,要开unsigned int //*sz[]别忘了.. #include < ...
- PAT-A1135. Is It A Red-Black Tree (30)
已知先序序列,判断对应的二叉排序树是否为红黑树.序列中负数表示红色结点,正数表示黑色结点.该序列负数取绝对值后再排序得到的是中序序列.根据红黑树的性质判断它是否符合红黑树的要求.考察了根据先序序列和中 ...
- linux -- 查看磁盘空间的大小
Ubuntu 查看磁盘空间大小命令 df -h Df命令是linux系统以磁盘分区为单位查看文件系统,可以加上参数查看磁盘剩余空间信息, 命令格式: df -hl 显示格式为: 文件系统 容量 已 ...
- Knockout.Js官网学习(Mapping插件)
前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...
- .Net Core Base64加密解密
一.Base64说明 1..Net Core中的Base64位加密解密和.Net Framework使用方式相同 2. Convert 类中提供了Base64位转码方法 Base64是网络上最常见的用 ...
- 【NLP】Python实例:基于文本相似度对申报项目进行查重设计
Python实例:申报项目查重系统设计与实现 作者:白宁超 2017年5月18日17:51:37 摘要:关于查重系统很多人并不陌生,无论本科还是硕博毕业都不可避免涉及论文查重问题,这也对学术不正之风起 ...
- sed学习[参考转载]
一.选项与参数: -n :使用安静(silent)模式.在一般 sed 的用法中,所有来自 STDIN 的数据一般都会被列出到终端上.但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者 ...
- linux达人养成计划学习笔记(七)—— 用户登录查看命令
一.查看用户登录信息 1.命令格式 w 2.命令结果 第一行信息是:系统当前时间 系统运行总时间 登录用户数量 一分钟/五分钟/十分钟的系统负载(越大越差) 二.who命令 1 ...
- Linux 系统实时监控的瑞士军刀 —— Glances
Linux 系统实时监控的瑞士军刀 —— Glances 对于 RHEL/CentOS/Fedora 发行版 ## RHEL/CentOS 7 64-Bit ## # wget http://dl.f ...