巧用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 ...
随机推荐
- 看了汤姆大叔的“你真懂JavaScript吗？”的一些感慨
看了汤姆大叔的“你真懂JavaScript吗?”,里面有5道题目,我都一一作了,然后在chrome的控制台里面运行了一遍,虽然只错了一道,但还是细细读了下答案,在此总结一下,看看是否对大家对这些Jav ...
- VC----Class Style类风格和窗口风格
CS_BYTEALIGNCLIENT:以字节边界来对齐窗口客户区,这个风格会影响 窗口 的宽度和水平位置.实际上没有看到效果. CS_BYTEALIGNWINDOW:以字节边界来对齐窗口,这个风格会影 ...
- join和setdaemon()初探
join()方法:主线程A中,创建了子线程B,并且在主线程A中调用了B.join(),那么主线程A会在调用的地方等待,直到子线程B完成操作后,才可以接着往下执行,那么在调用这个线程时可以使用被调用线程 ...
- 通过KUDU获取Azure网站的日志
部署到Azure上的website,由于无法通过RDP的方式去登录查看log,所以我们只能通过FTP的方式或者kudu的方式进行查看,具体如下: 1.使用FTP账户和密码登录网站的KUDU界面: 如您 ...
- Ecshop 单选按钮组功能 颜色多选
效果: js代码: function changeAtt(t,src,key) { document.getElementById('spec_value_'+src).checked='checke ...
- js日历插件 中文、英文日历
日历插件 来源网站:http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 六款英文日历 http://www.bobd.cn/desi ...
- 64bit upload app store
Unity将来时:IL2CPP是什么? http://zhuanlan.zhihu.com/indieace/19972689 Unity3D将来时:IL2CPP(下) http://www.game ...
- Redis 安装，主从配置及Sentinel配置自动Failover
1.安装redis 首页地址:http://redis.io/ 下载地址:http://download.redis.io/ 下载最新的源码包 tar -zxvf redis-stable.tar.g ...
- 判断QQ是否在线
<html> <body> ggygygygy<br> <td><a href="http://wpa.qq.com/msgrd?V=1 ...
- Elasticsearch-PHP 索引操作(转)
索引操作 本节通过客户端来介绍一下索引API的各种操作.索引操作包含任何管理索引本身(例如,创建索引,删除索引,更改映射等等). 我们通过一些常见的操作的代码片段来介绍,然后在表格中列出剩下的方法.R ...