巧用jQuery选择器写表单办法总结（提高效率）
转载自：http://blog.csdn.net/violetjack0808/article/details/52221343
1、文本和文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<div>
<label>姓名：<input type="text" id="name"></label>
<label>性别：<input type="text" id="sex"></label>
<label>年龄：<input type="text" id="age"></label>
<label>时间：<input type="text" id="time"></label>
</div>
<div>
<label>a：<span id="param01">1</span></label>
<label>b：<span id="param02">2</span></label>
<label>c：<span id="param03">3</span></label>
<label>d：<span id="param04">4</span></label>
</div>
</div>
<button onclick="showResult()">显示结果</button>
<script>
//多条input或者span的快速赋值
//data是模拟服务器返回的JSON数据
var data = '{"name":"张三","sex":"女","age":22,"time":"2016-5-10","param01":111,"param02":222,"param03":333,"param04":444}';
//将数据显示到页面中
var json = eval('(' + data + ')');
for (var key in json) {
if ($('#' + key).attr('type') == 'text') {
$('#' + key).val(json[key]);
}
if($('#' + key).prop('tagName') == 'SPAN'){
$('#' + key).text(json[key]);
}
} //获取文本和文本框的内容转为JSON对象
function showResult() {
var model = {};
$('input[type="text"]').each(function () {
model[$(this).attr('id')]=$(this).val();
});
$('span').each(function () {
model[$(this).attr('id')]=$(this).text();
});
console.log(model);
}
</script>
</body>
</html>
2、Radio和CheckBox
<!DOCTYPE html> <html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Title</title>
<script src="../jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<div>
<label><input type="radio" name="param01" value="1">1</label>
<label><input type="radio" name="param01" value="2">2</label>
<label><input type="radio" name="param01" value="3">3</label>
</div>
<div>
<label><input type="radio" name="param02" value="1">1</label>
<label><input type="radio" name="param02" value="2">2</label>
<label><input type="radio" name="param02" value="3">3</label>
</div>
<div>
<label><input type="radio" name="param03" value="1">1</label>
<label><input type="radio" name="param03" value="2">2</label>
<label><input type="radio" name="param03" value="3">3</label>
</div>
<div>
<label><input type="checkbox" name="param04">1</label>
<label><input type="checkbox" name="param04">2</label>
<label><input type="checkbox" name="param04">3</label>
<label><input type="checkbox" name="param04">3</label>
</div>
<div>
<label><input type="checkbox" name="param05">1</label>
<label><input type="checkbox" name="param05">2</label>
<label><input type="checkbox" name="param05">3</label>
<label><input type="checkbox" name="param05">3</label>
</div>
<button onclick="showResult()">显示结果</button>
<label id="result">result</label>
</div>
<script>
//多条radio或者checkbox的快速赋值
var data = '{"param01":"1","param02":"3","param03":"2","param04":",1,0,0,0","param05":",0,0,1,1"}';
var json =eval( '(' + data + ')');
for(var key in json){
if ($('input[name=' + key + ']').attr('type') == 'radio') {
showRadioValue(key, json[key]);
}
if ($('input[name=' + key + ']').attr('type') == 'checkbox') {
showCheckBoxValue(key, json[key]);
}
} function showRadioValue(name, value) {
$('input[name=' + name + ']').each(function () {
if(value == $(this).val()){
$(this).attr('checked', 'true');
}
});
} function getRadioValue(name) {
var value = 0;
var i = 0;
$('input[name=' + name + ']' ).each(function () {
if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
value = $('input[name=' + name + ']').eq(i).val();
return;
}
i++;
});
return value;
} function showCheckBoxValue (name, value) {
var values = value.split(',' );
var row = 1;
$('input[name="' + name + '"]').each( function () {
if (values[row] == 1) {
$(this).attr("checked" , 'true');
}
row++;
});
} function getCheckboxValue (name) {
var text = "" ;
$('input[name="' + name + '"]').each( function () {
var t = '' ;
if ($(this ).is(':checked')) {
t = "1";
} else {
t = "0";
}
text += "," + t;
});
return text;
} function showResult() {
var model = {};
var radioName = '';
var checkboxName = '';
$("input[type='radio']").each(function () {
if($(this).attr('name') != radioName){
radioName = $(this).attr('name');
model[radioName] = getRadioValue(radioName);
}
});
$("input[type='checkbox']").each(function () {
if($(this).attr('name') != checkboxName){
checkboxName = $(this).attr('name');
model[checkboxName] = getCheckboxValue(checkboxName);
}
});
console.log(model);
}
</script>
</body>
</html>
后续待添加以及改进，Jquery使用不熟悉。
巧用jQuery选择器写表单办法总结（提高效率）的更多相关文章
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
- 使用jQuery重置(reset)表单的方法
由于JQuery中,提交表单是像下面这样的: 代码如下: $('#yigeform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 代码如下: $('#yigeform' ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- input内文字点击消失 弹出层，可以写表单
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
随机推荐
- mysql简单操作(实时更新)
从表中删除某条记录: delete from table_name where xx=xxxx; 创建数据库(注意不同系统对大小写的敏感性): create database xxx; 查看数据库列表 ...
- Linux运维工程师入门的10大实用工具
说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具. 我就大概列出这几方面,这样入门就基本没问题了. 工具如下: 1.Linux系统基础 这个不用说了,是基础中的基础,连这 ...
- Java SimpleDateFormat使用
SimpleDateFormat 是一个格式化日期的具体类. 它允许格式化 (date -> text) 和标准化. SimpleDateFormat 允许以为日期-时间格式化选择任何用户指定的 ...
- iOS - Xcode7.3插件实效问题解决方法
以往Xcode升级插件实效.1.关闭xcode 2.终端获取uid 3.文件中info.plist手动添加uid,现在不用了.在网上找的,特地记录一下,尤其是插件太多,不会麻烦了. 详细操作步骤: 关 ...
- 在Nginx中部署基于IP的虚拟主机
一.虚拟主机概念 虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点.应用组件等,提供必要的站点功能.数据存放和传输功能.所谓虚拟主机,也叫"网站空间", 就是把一台运行在 ...
- Unicode 与 UTF 字符标准
Unicode 国际字符标准(UCS)是一个字符编码系统,它被设计用来支持世界各国不同语言书面文体之间的数据交换.处理以及显示. Unicode用两个字节表示一个字符.前127个字符与A ...
- DataView
表示用于排序.筛选.搜索.编辑和导航的 DataTable 的可绑定数据的自定义视图. DataView的功能类似于数据库的视图,他是数据源DataTable的封装对象,可以对数据源进行排序.搜索.过 ...
- Jquery 的事件方法
1.$(selector).bind(event,data,function,map) //给元素添加一个事件 2.当元素失去焦点时发生 blur 事件,获得焦点时触发focus事件: $(" ...
- js正则匹配浮点数或整数
var pos='point(12.4 -45.423453)';var re = /([+]\d+[.]\d+|[-]\d+[.]\d+|\d+[.]\d+|[+]\d+|[-]\d+|\d+)/i ...
- FCC上的初级算法题
核心提示:FCC的算法题一共16道.跟之前简单到令人发指的基础题目相比,难度是上了一个台阶.主要涉及初步的字符串,数组等运算.仍然属于基础的基础,官方网站给出的建议完成时间为50小时,超出了之前所有非 ...