巧用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 ...
随机推荐
- [Android]ListFragment.setEmptyText() 抛 java.lang.IllegalStateException
在ListFragment子类中直接调用setEmptyText(getString(R.string.msg_no_invited_parties)), 抛java.lang.IllegalStat ...
- BZOJ2152：聪聪可可
传送门 点分治常规题.练习模板 //OJ 2077 //by Cydiater //2016.9.23 #include <iostream> #include <cstdio> ...
- elk系列2之multiline模块的使用
preface 上回说道了elk的安装以及kibana的简单搜索语法,还有logstash的input,output的语法,但是我们在使用中发现了一个问题,我们知道,elk是每一行为一个事件,像Jav ...
- POJ3468A Simple Problem with Integers（区间加数求和 + 线段树）
题目链接 题意:两种操作:一是指定区间的数全都加上一个数,二是统计指定区间的和 参考斌神的代码 #include <iostream> #include <cstring> # ...
- rhino(犀牛) --- color control
create color materials, if "材料赋予方式" is "图层", the color of "材质" is show ...
- 机器学习笔记--KNN算法2-实战部分
本文申明:本系列的所有实验数据都是来自[美]Peter Harrington 写的<Machine Learning in Action>这本书,侵删. 一案例导入:玛利亚小姐最近寂寞了, ...
- ecshop 批量生成订单信息
<?php /** * ecshop 给商品添加随机添加订单信息 * @author Abner * qq :346882795 * email: Abner3721@163.com * * * ...
- 关于Spring常用的注解
参考文献:http://www.cnblogs.com/xdp-gacl/p/3495887.html 使用注解来构造IoC容器 用注解来向Spring容器注册Bean.需要在applicationC ...
- jquery.cookie使用方法
jquery.cookie 使用方法 一个轻量级的 cookie 插件,可以读取.写入.删除 cookie . jquery.cookie.js 的配置 首先包含 jQuery 的库文件,在后面包含 ...
- State Threads——异步回调的线性实现
State Threads——异步回调的线性实现 原文链接:http://coolshell.cn/articles/12012.html 本文的标题看起来有点拗口,其实State Threads库就 ...