jquery实现后台问卷调查添加多个问题选项表单效果代码-html代码-BFW代码库

jquery实现后台问卷调查添加多个问题选项表单效果代码

代码语言：html

代码描述：jquery实现后台问卷调查添加多个问题选项表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>
	<style type="text/css">
		.box {
			width: 600px;
			height: 100%;
			border: 1px solid gainsboro;
		}

		form input {
			display: block;
			margin: 10px;
			height: 30px;
			width: 230px;
			font-size: 14px;
			background: #fff;
			text-align: left;
			line-height: 30px;
			border-radius: 3px;
			padding-left: 10px;
			border: 1px solid #ccc;
		}

		.question {
			margin-left: 10px;
			display: flex;
			justify-content: flex-end;
			/* justify-content: space-between; */
		}

		.content {
			margin-left: 10px;
		}

		button {
			height: 30px;
			width: 100px;
			background: #fff;
			margin: 10px;
			border-radius: 3px;
			border: 1px solid #ccc;
		}

		.content b {
			float: left;
			padding: 16px 3px;
		}

		.choose {
			margin-left: 20px;
		}

		.choose button {
			margin: 0;
			padding: 0;
			width: 60px;
		}

		.choose button:hover {
			color: #01AAED;
		}

		.choose button:first-child {
			border-right: 0;
			border-radius: 3px 0 0 3px;
		}

		.choose button:last-child {
			margin-left: -5px;
			border-radius: 0 3px 3px 0;
		}

		.check {
			border: 1px solid #01AAED !important;
			box-shadow: 0px 1px 5px #90d6fa;
			position: sticky;
			color: #01AAED;
			z-index: 99;
		}
	</style>
	<body>
		<div class="box">
			<form id="form">
				<input type="text" name="asd" placeholder="请输入问卷名" />
				<input type="text" name="asd1" placeholder="请输入问卷说明" />

				<div class="title" leg-filter="title"></div>
				
				<button type="button" id="submit">提交</button>
			</form>
		</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
		    'use strict';

(function (Global) {
	$.extend({
		survey: function survey(ops) {
			var title = ops.ele;
			var id = ops.submit;
			var name = ops.name;
			// let form = ops.form;

			var html = '<div class="questions">';
			html += '<div class="choose">';
			html += '	<button type="button" data-type = "1" class="check">单选</button>';
			html += '	<button type="button" data-type = "2" >多选</button>';
			html += '</div>';
			html += '<input type="text" style="display: none;" name="choose" value="1" class="chooseValue"/>';
			html += '<div style="display: flex;justify-content: space-between;"><input type="text" name="title" placeholder="问题内容" /><button type="button" class="delTitle">删除</button></div>';
			html += '<div class="content">';
			html += '<div><b class="leg-question-num">A:</b><div style="display: flex;justify-content: space-between;"><input type="text" name="content" placeholder="选项内容" /><button type="button" class="delContent">删除</button></div></div>';
			html += '</div>';
			html += '<div class="question">';
			html += '<button type="button" class="addQuestion">添加问题</button>';
			html += '<button type="button" class="addContent">添加选项</button>';
			html += '</div>';
			html += '</div>';

			function AZ() {
				var arr = [];
				for (var i = 65; i < 91; i++) {
					if (i > 90 && i < 97) {
						continue;
					}
					// 接受一个指定的 Unicode 值，然后返回一个字符串
					arr.push(String.fromCharCode(i));
				}
				return arr;
			}
			var arr = AZ();

			$(title).on("click", &.........完整代码请登录后点击上方下载按钮下载查看