jquery组装json对象，写的玩的

tivonHou

浏览: 49533 次
性别:
来自: 西安

最近访客更多访客>>

tedeum

蕃薯耀

aichenglong

logyang1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery json

json

<!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() 方法

分享到：

jsp中include指令与include动作的区别 | JQuery ----Reset()方法

2013-08-24 11:20
浏览 1277
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery组装json对象，写的玩的

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery组装json对象， 写的玩的

评论

发表评论

相关推荐

最近访客更多访客>>

jquery组装json对象，写的玩的