jQuery仿问卷星自定义修改问卷调查表单代码资源-CSDN下载

共4个文件

css：1个

html：1个

js：1个

仿问卷星

问卷添加表单

自定义问卷

jquery

5星 · 超过95%的资源需积分: 48 10 浏览量 2018-07-12 10:54:39 上传评论 31 收藏 42KB RAR 举报

**jQuery 仿问卷星自定义修改问卷调查表单代码** 在网页开发中，构建问卷调查表单是一项常见的任务。为了提高效率和用户体验，开发者经常参考现有的成熟平台，如问卷星，来实现自己的自定义功能。这个项目就是基于jQuery实现的一个仿问卷星的调查问卷表单编辑器，它提供了丰富的功能，使用户能够方便地创建和编辑问卷。 **1. 表单元素的上下移动功能** 此功能允许用户根据需求调整表单问题的顺序。通过jQuery的DOM操作，我们可以监听用户的拖动事件，然后更新问题节点的位置，从而改变问题在页面上的显示顺序。这一功能对于构建逻辑清晰的问卷至关重要，因为它允许用户按照逻辑流程排列问题。 **2. 编辑和删除功能** 在问卷设计过程中，可能需要对已添加的问题进行修改或删除。这个代码集实现了点击编辑按钮时，将问题变为可编辑状态，用户可以修改问题内容和选项。点击删除按钮则移除相应的问题。这需要用到jQuery的选择器和事件绑定技术，以及DOM的remove()方法来实现。 **3. 新增问卷信息** 用户可以新增不同类型的表单问题，如单选题、多选题、填空题和矩阵题。这些功能的实现依赖于jQuery的动态DOM操作。例如，可以通过模板引擎（如Handlebars或Mustache）预定义各种问题类型的HTML结构，然后在用户选择添加新问题类型时，根据选择插入对应的模板。 **4. 多选和单选题** 多选题和单选题通常需要一个选项列表，用户可以勾选多个或单个选项。在jQuery中，可以通过checkbox或radio元素实现。同时，需要处理好选中状态的改变，并保存用户的选项设置。 **5. 填空题** 填空题是让用户自由输入答案的类型。在HTML中，可以使用`<input type="text">`标签来创建文本输入框，jQuery可以用来处理输入框的事件，如onfocus和onblur，以实现填写验证和提示功能。 **6. 矩阵题** 矩阵题是一种复杂的表单元素，它将多组问题和选项组合在一起。实现矩阵题通常需要嵌套的表格结构，结合jQuery，用户可以选择行和列，动态添加或删除行列，以适应不同的需求。 **7. CSS和JavaScript文件** 在压缩包中，`index.html`是主页面，`images`目录包含所需的图片资源，`js`目录下的脚本文件（可能包括`main.js`或类似名称的文件）用于实现上述功能，而`css`目录中的样式表（如`style.css`）负责问卷表单的布局和视觉效果。通过CSS，可以调整表单的样式，使其与问卷星的界面相似，同时保证良好的用户体验。总结，这个jQuery实现的问卷编辑器是Web开发者学习和实践表单交互、DOM操作、事件处理和样式控制的好例子。通过深入理解并应用这些技术，开发者可以创建出更加灵活、用户友好的在线问卷系统。

资源推荐

资源详情

资源评论

收起资源包目录

1-16051R24423.rar （4个子文件）

index.html 23KB

images

jiajia.png 901B

jquery-1.8.0.min.js 161KB

css

wenjuan_ht.css 5KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>后台上移下移，编辑，删除效果</title> <link rel="stylesheet" type="text/css" href="css/wenjuan_ht.css"> <script src="js/jquery-1.8.0.min.js"></script> <script> $(document).ready(function(e) { $(".btwen_text").val("题目"); $(".btwen_text_dx").val("单选题目"); $(".btwen_text_duox").val("多选题目"); $(".btwen_text_tk").val("填空题目"); $(".leftbtwen_text").val("例子：CCTV1，CCTV2，CCTV3"); $(".xxk_title li").click(function(){ var xxkjs = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $(".xxk_conn").children(".xxk_xzqh_box").eq(xxkjs).show().siblings().hide(); }); //鼠标移上去显示按钮 $(".movie_box").hover(function(){ var html_cz = "<div class='kzqy_czbut'><a href='javascript:void(0)' class='sy'>上移</a><a href='javascript:void(0)' class='xy'>下移</a><a href='javascript:void(0)' class='bianji'>编辑</a><a href='javascript:void(0)' class='del' >删除</a></div>" $(this).css({"border":"1px solid #0099ff"}); $(this).children(".wjdc_list").after(html_cz); },function(){ $(this).css({"border":"1px solid #fff"}); $(this).children(".kzqy_czbut").remove(); //$(this).children(".dx_box").hide(); }); //下移 $(".xy").live("click", function() { //文字的长度 var leng = $(".yd_box").children(".movie_box").length; var dqgs = $(this).parent(".kzqy_czbut").parent(".movie_box").index(); if(dqgs < leng-1){ var czxx = $(this).parent(".kzqy_czbut").parent(".movie_box"); var xyghtml = czxx.next().html(); var syghtml = czxx.html(); czxx.next().html(syghtml); czxx.html(xyghtml); //序号 czxx.children(".wjdc_list").find(".nmb").text(dqgs+1); czxx.next().children(".wjdc_list").find(".nmb").text(dqgs+2); }else{ alert("到底了"); } }); //上移 $(".sy").live("click", function() { //文字的长度 var leng = $(".yd_box").children(".movie_box").length; var dqgs = $(this).parent(".kzqy_czbut").parent(".movie_box").index(); if(dqgs > 0){ var czxx = $(this).parent(".kzqy_czbut").parent(".movie_box"); var xyghtml = czxx.prev().html(); var syghtml = czxx.html(); czxx.prev().html(syghtml); czxx.html(xyghtml); //序号 czxx.children(".wjdc_list").find(".nmb").text(dqgs+1); czxx.prev().children(".wjdc_list").find(".nmb").text(dqgs); }else{ alert("到头了"); } }); //删除 $(".del").live("click", function() { var czxx = $(this).parent(".kzqy_czbut").parent(".movie_box"); var zgtitle_gs = czxx.parent(".yd_box").find(".movie_box").length; var xh_num = 0; //重新编号 czxx.parent(".yd_box").find(".movie_box").each(function() { $(".yd_box").children(".movie_box").eq(xh_num).find(".nmb").text(xh_num); xh_num++; //alert(xh_num); }); czxx.remove(); }); //编辑 $(".bianji").live("click", function() { //编辑的时候禁止其他操作 $(this).siblings().hide(); //$(this).parent(".kzqy_czbut").parent(".movie_box").unbind("hover"); var dxtm = $(".dxuan").html(); var duoxtm = $(".duoxuan").html(); var tktm = $(".tktm").html(); var jztm = $(".jztm").html(); //接受编辑内容的容器 var dx_rq = $(this).parent(".kzqy_czbut").parent(".movie_box").find(".dx_box"); var title = dx_rq.attr("data-t"); //alert(title); //题目选项的个数 var timlrxm = $(this).parent(".kzqy_czbut").parent(".movie_box").children(".wjdc_list").children("li").length; //单选题目 if(title==0){ dx_rq.show().html(dxtm); //模具题目选项的个数 var bjxm_length = dx_rq.find(".title_itram").children(".kzjxx_iteam").length; var dxtxx_html = dx_rq.find(".title_itram").children(".kzjxx_iteam").html(); //添加选项题目 for (var i_tmxx = bjxm_length; i_tmxx < timlrxm-1 ; i_tmxx++) { dx_rq.find(".title_itram").append("<div class='kzjxx_iteam'>"+dxtxx_html+"</div>"); } //赋值文本框 //题目标题 var texte_bt_val = $(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").eq(0).find(".tm_btitlt").children(".btwenzi").text(); dx_rq.find(".btwen_text").val(texte_bt_val); //遍历题目项目的文字 var bjjs=0; $(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").each(function() { //可选框框 var ktksfcz = $(this).find("input").hasClass("wenb_input"); if(ktksfcz){ var jsxz_kk = $(this).index(); dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(jsxz_kk-1).find("label").remove(); } //题目选项 var texte_val = $(this).find("span").text(); dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(bjjs-1).find(".input_wenbk").val(texte_val); bjjs++ }); } //多选题目 if(title==1){ dx_rq.show().html(duoxtm); //模具题目选项的个数 var bjxm_length = dx_rq.find(".title_itram").children(".kzjxx_iteam").length; var dxtxx_html = dx_rq.find(".title_itram").children(".kzjxx_iteam").html(); //添加选项题目 for (var i_tmxx = bjxm_length; i_tmxx < timlrxm-1 ; i_tmxx++) { dx_rq.find(".title_itram").append("<div class='kzjxx_iteam'>"+dxtxx_html+"</div>"); //alert(i_tmxx); } //赋值文本框 //题目标题 var texte_bt_val = $(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").eq(0).find(".tm_btitlt").children(".btwenzi").text(); dx_rq.find(".btwen_text").val(texte_bt_val); //遍历题目项目的文字 var bjjs=0; $(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").each(function() { //可选框框 var ktksfcz = $(this).find("input").hasClass("wenb_input"); if(ktksfcz){ var jsxz_kk = $(this).index(); dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(jsxz_kk-1).find("label").remove(); } //题目选项 var texte_val = $(this).find("span").text(); dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(bjjs-1).find(".input_wenbk").val(texte_val); bjjs++ }); } //填空题目 if(title==2){ dx_rq.show().html(tktm); //赋值文本框 //题目标题 var texte_bt_val = $(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").eq(0).find(".tm_btitlt").children(".btwenzi").text(); dx_rq.find(".btwen_text").val(texte_bt_val); } //矩阵题目 if(title==3){ dx_rq.show().html(jztm); } }); //增加选项 $(".zjxx").live("click", function() { var zjxx_html = $(this).prev(".title_itram").children(".kzjxx_iteam").html(); $(this).prev(".title_itram").append("<div class='kzjxx_iteam'>"+zjxx_html+"</div>"); }); //删除一行 $(".del_xm").live("click", function() { //获取编辑题目的个数 var zuxxs_num = $(this).parent(".kzjxx_iteam").parent(".title_itram").children(".kzjxx_iteam").length; if(zuxxs_num > 1){ $(this).parent(".kzjxx_iteam").remove(); }else{ alert("手下留情"); } }); //取消编辑 $(".dx_box .qxbj_but").live("click", function() { $(this).parent(".bjqxwc_box").parent(".dx_box").empty().hide(); $(".movie_box").css({"border":"1px solid #fff"}); $(".kzqy_czbut").remove(); // }); //完成编辑（编辑） $(".swcbj_but").live("click", function() { var jcxxxx = $(this).parent(".bjqxwc_box").parent(".dx_box"

评论收藏

内容反馈