jQuery添加单选多选题的代码

点击添加可以添加题目，可以添加单选或者多选题目，选项可以添加可以减少选项，填写选择此选项的分数，点击保存，保存到json，使用的时候可以保存到数据库

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>index</title><script src="jquery.js" type="text/javascript"></script><div id="all"></div><div id="form"><div class="title">题目:<input type="text" id="title" /></div><div class="sm">单选/多选 <span><input type="radio" value="s" name="sm" checked="checked"/>单选</span><span><input type="radio" value="m" name="sm" />多选</span></div><div><span id="options" style="display: inline-block" ><div><input type="text" ><input type="number" ></div><div><input type="text" ><input type="number" ></div><div><input type="text" ><input type="number" ></div></span><button id="more" style="display: inline-block">+More</button></div><div><button id="save">+Save</button></div></div></head>
<body><script>var json=[{title:"题目1",option:[{id:1,title:'答案A',point:3},{id:2,title:'答案B',point:2},{id:3,title:'答案C',point:1}],sm:'s'},{title:"题目2",option:[{id:1,title:'答案1',point:3},{id:2,title:'答案2',point:2},{id:3,title:'答案3',point:1}],sm:'s'},{title:"题目3",option:[{id:1,title:'选项A ',point:3},{id:2,title:'选项B',point:2},{id:3,title:'选项C',point:1}],sm:'m'}];$(function(){var html="";json.forEach(function(item,index){html+="<div class='title'>"+item.title+"</div><div class='title'>"+(item.sm=="s"?"单选":"多选")+"</div>";html+="<ul>";item.option.forEach(function(it){html+="<li><span class='attr_name'>"+it.title+"</span><span class='attr_point'>"+it.point+"</span></li>";});html+="</ul>";});html+="<button id='add'>+Add</button>";$("#all").html(html);$("#form").hide();});$("#add").live("click",function(){if($("#form").css("display")=="none"){$("#form").show();$("#add").html("Hide");}else{$("#form").hide();$("#add").html("+Add");}});$("#more").live("click",function(){var html="<div><input type='text'>  <input type='number' ><button class='remove'>-Remove</button></div>";$("#options").append(html);});$(".remove").live("click",function(){$(this).parent().remove();});$("#save").live("click",function(){var title=$("#form .title input").val();if(!title){alert("填写的标题不能为空");return false;}var sm=$("#form input[name='sm']:checked").val();var texts=$("#options input[type='text']");var numbers=$("#options input[type='number']");console.log("numbers",numbers);var option_titles=[];var bool_text=true;texts.each(function(item){if($(this).val().length==0){bool_text=false;}option_titles.push($(this).val());});if(!bool_text){alert("填写的项不能为空");return false;}var option_points=[];var bool_point=true;numbers.each(function(item){if($(this).val().length==0){bool_point=false;}option_points.push($(this).val());});if(!bool_point){alert("填写的项分值不能为空");return false;}console.log("option_titles",option_titles);console.log("option_points",option_points);var item={};item.title=title;item.sm=sm;var options=[];option_titles.forEach(function(it,index){options.push({"id":(index+1),"title":it,"point":option_points[index]});});item.option=options;$("#form").hide();json.push(item);var html="";json.forEach(function(item,index){html+="<div class='title'>"+item.title+"</div><div class='title'>"+(item.sm=="s"?"单选":"多选")+"</div>";html+="<ul>";item.option.forEach(function(it){html+="<li><span class='attr_name'>"+it.title+"</span><span class='attr_point'>"+it.point+"</span></li>";});html+="</ul>";});html+="<button id='add'>+Add</button>";$("#all").html(html);console.log("json",json);});</script>
</body>
</html>

jQuery添加单选多选题的代码相关推荐

jq 在元素中追加html代码,jquery添加html代码，怎样动态的添加一条html代码?
下面的文章内容要给大家介绍的就是jquery动态的添加html代码的内容,那么你知道应该如何添加吗?一起来看看方式吧. 添加新bai内容的4个jquery方法,分别是append() - 在被bai选 ...
给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动...
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
jquery获取单选框复选框下拉框值
jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用.有什么疑问可以留言效果图: html代码: <!DOCTYPE html> <h ...
php+jq+添加css,jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
jQuery添加class样式，移除同胞的class样式
实现效果:点击模块为当前元素添加class,同时移除其他三个元素的class $('#headnav li').click(function() { $(this).addCl ...
Jquery - 添加属性、添加class、添加Css
Jquery - 添加属性.添加class.添加Css 一.设置属性: 方式一 jQuery 代码: $("img").attr({ src: "test.jpg&qu ...
jquery添加删除表格行
jquery向表格添加一行,或者删除一行数据表格最后一行有一个添加按纽,具体如下当点击添加按纽的时候,在这个表格的倒数第二行添加一行,因为倒数第一行是添加按钮的位置.代码如下页面的table代码 ...

jQuery添加单选多选题的代码

jQuery添加单选多选题的代码相关推荐

最新文章

热门文章