巧用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 ...
随机推荐
- iOS自动处理键盘事件的第三方库：IQKeyboardManager
我们写界面要考虑很多用户体验问题,键盘事件的响应就是比较麻烦的一种.我们需要监听键盘事件,考虑点击背景收起键盘.考虑键盘遮挡输入框问题等等,而且每个界面都要做这么一套.这个库帮我们解决了这个事情. 这 ...
- WPF中Dispatcher未捕获异常之处理
在UI线程中 在APP.XAML中定义 DispatcherUnhandledException事件 在工作线程中 PageMain.GetInstance().Dispatcher.Invoke(( ...
- Jboss7.1 加入realm auth认证 bootsfaces 美化的登录页面
jboss-as-7.1.1.Final\standalone\configuration: 1, standalone.xml中 <security-domains>标签里面添加: &l ...
- iOS - CAEmitterLayer 学习笔记一
其他参考博客: http://my.oschina.net/u/2340880/blog/485095 http://www.cnblogs.com/YouXianMing/p/3785876.htm ...
- BZOJ4522: [Cqoi2016]密钥破解
pollard's rho模板题. 调参调到160ms无能为力了,应该是写法问题,不玩了. #include<bits/stdc++.h> using namespace std; typ ...
- mysql 数据库怎样快速的复制表以及表中的数据
1.copy表结构 SHOW CREATE TABLE runoob_tbl:(选择你要复制的表),copy 它的创建语句,执行即可创建表结构相同的表了,记得改名称哦. 2.copy表数据 选择你要插 ...
- CSS3自适配手机屏幕
@media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...
- C#的两个大方向
http://zhidao.baidu.com/link?url=wG9G_EaT3tRd5_7ndU3vpFqmuc6S8N7F5TpBYsDPEui3HQ-wcU7nqw-_aRpIwtXQbC3 ...
- Jasper（物联网网络支撑平台公司）的技术为什么这么牛逼？
Jasper在这个行业积累了十几年,合作的运营商超过30个,合作的行业大咖包括了通用.空客.宝马.特斯拉等几千个行业龙头,还是有很多积累下来的优势的. 一是,Jasper通过积累下来的行业应用经验,针 ...
- openstack虚拟机启动过程
核心项目3个 1.控制台 服务名:Dashboard 项目名:Horizon 功能:web方式管理云平台,建云主机,分配网络,配安全组,加云盘 2.计算 服务名:计算 项目名:Nova 功能:负责响应 ...