<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>调查问卷</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function (){
$("#tiaojjiao").bind("click",function(){
var joson = [];
var answer = [];
$("input:checked").add("textarea").each(function (i){
if(i==0){
joson.push("{"+$(this).attr("name")+":'"+$(this).val()+"'");
}else{
if($(this).attr("name")=="answer"){
answer.push($(this).val());
}else{
joson.push($(this).attr("name")+":'"+$(this).val()+"'");
}
}
});
joson.push("answer"+":'"+answer+"'}");
var obj = eval("("+joson+")");
$("#show").append("<tr><td>"+obj.sex+"</td><td>"+obj.education+"</td><td>"+obj.age+"</td><td>"+obj.answer+"<br/>"+obj.answerTxt+"</td></tr>");
window.scrollBy(0,-600)
});
});
</script>
//第二种写法 调用serializeArray直接返回json对象
<script>
$(function (){
$("#tiaojjiao").bind("click",function(){
var fields = $("input:checked,textarea").serializeArray();
jQuery.each( fields, function(i, field){
$("#show").append("<tr><td>"+field.name+"</td><td>"+field.value+"</td></tr>");
});
window.scrollBy(0,-600)
});
});
</script>
</head>
<body style="text-align:center">
<div style="background-color:#F2F4FF">
选择的结果:
<table id="show">
<tr>
<th>性别</th><th>学历</th><th>年龄</th><th>薪酬标准的确定和变动关联因素</th>
</tr>
</table>
</div>
<div class="two">
<div class="three"><h3>1、您的性别?</h3>
<div class="four"><input id="abc1_1" type="radio" name="sex" value="男" />男</div>
<div class="four"><input id="abc1_2" type="radio" name="sex" value="女" />女</div>
</div>
<div class="three"><h3>2、您的受教育程度?</h3>
<div class="four"><input id="abc2_1" type="radio" name="education" value="硕士或硕士以上" />硕士或硕士以上</div>
<div class="four"><input id="abc2_2" type="radio" name="education" value="本科" />本科</div>
<div class="four"><input id="abc2_3" type="radio" name="education" value="大专" />大专</div>
<div class="four"><input id="abc2_4" type="radio" name="education" value="大专以下" />大专以下</div>
</div>
<div class="three"><h3>3、您的年龄是?</h3>
<div class="four"><input id="abc3_1" type="radio" name="age" value="25岁(含)及以下" />25岁(含)及以下</div>
<div class="four"><input id="abc3_2" type="radio" name="age" value="26岁--35岁(含)" />26岁--35岁(含)</div>
<div class="four"><input id="abc3_3" type="radio" name="age" value="36岁--45岁(含)" />36岁--45岁(含)</div>
<div class="four"><input id="abc3_4" type="radio" name="age" value="46岁以上" />46岁以上</div>
</div>
<div class="three" ><h3>4、您认为薪酬标准的确定和变动应该与哪些因素关联度最高?(多选题)</h3>
<div class="four"><input id="abc26_1" type="checkbox" name="answer" value="学历" />学历</div>
<div class="four"><input id="abc26_2" type="checkbox" name="answer" value="岗位价值" />岗位价值</div>
<div class="four"><input id="abc26_3" type="checkbox" name="answer" value="工作年限" />工作年限</div>
<div class="four"><input id="abc26_4" type="checkbox" name="answer" value="工作经验、工作资历" />工作经验、工作资历</div>
<div class="four"><input id="abc26_5" type="checkbox" name="answer" value="工作业绩" />工作业绩</div>
<div class="four"><input id="abc26_6" type="checkbox" name="answer" value="工作绩效" />工作绩效</div>
<div class="four"><input id="abc26_7" type="checkbox" name="answer" value="工作绩效" />技能水平</div>
<div class="four"><input id="abc26_8" type="checkbox" name="answer" value="工作环境" />工作环境</div>
<div class="four"><input id="abc26_9" type="checkbox" name="answer" value="工作时间" />工作时间</div>
<div class="four"><h3>其 他:</h3>
<textarea name="answerTxt" type="text" ></textarea>
</div>
<input type="button" id="tiaojjiao" value="提 交" />
</div>
</div>
</body>
</html>
<style type="text/css">
table {
border: 1px solid #B1CDE3;
padding:0;
margin:0 auto;
border-collapse: collapse;
}
td,th {
border: 1px solid #B1CDE3;
background: #fff;
font-size:12px;
padding: 3px 3px 3px 8px;
color: #4f6b72;
}
</style>
<注意>:如果从头部插入的话 用:prepend() 方法
分享到:
相关推荐
使用JQuery实现从JSON对象转换为form提交数据
在官网上一直下载不下来 然后共享在这 jquery.json-2.3.min.js和jquery.json-2.3.js
jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。
Jquery-json 是 jQuery 的一个插件,可轻松实现对象和 JSON 字符串之间的转换。可序列化 JavaScript 对象、数值、字符串和数组到 JSON 字符串,同时可转换 JSON 字符串到 JavaScript。 var thing = {plugin: '...
jquery.json-viewer, 用于显示JSON数据的jQuery插件 jQuery浏览器JSON浏览器是一个jQuery插件,它可以通过将JSON对象转化为HTML来轻松显示JSON对象。功能:语法高亮显示在单击时折叠和展开子节点可以点击链接易于...
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里...
jquery.jsoncookie.js
jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性,提高了读取的效率,比读xml文件更加方面
jquery.json2xml.js&&jquery.xml2json.js在jQuery的基础上实现json与xml的相互转换
jquery.json-viewer.js是一款查看json格式数据的jquery插件。它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能。
jquery.json-2.4解析json对象
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...
jquery1.7 jquery for json 2.3
jquery提供的json插件,提供js对象与json字符串间互相转换
用jquery解析JSON数据的方法20110227用jquery解析JSON数据的方法20110227
向页面展示json格式数据,针对需要展示的数据进行美话处理 之前上传了jquery-json数据美化,传错了,请下载这个
jquery.json.js 2.4 jquery json库
jquery json cookie demo jQuery格式化json工具 jQuery格式化json工具