正文

揭秘：无需编程，轻松打造jQuery问卷调查Demo实操指南

/0 浏览量
0326

引言

问卷调查是一种收集公众意见、了解市场需求或进行市场调研的有效手段。随着Web技术的发展，问卷调查的线上化已经成为趋势。本文将向您展示如何使用jQuery，无需编程基础，轻松打造一个简单的问卷调查Demo。

准备工作

在开始之前，您需要准备以下内容：

  1. HTML文件：用于构建问卷的页面结构。
  2. CSS文件：用于美化问卷的样式。
  3. jQuery库：用于简化JavaScript操作。

您可以从网上下载这些资源，或者自己创建。

创建HTML结构

首先，我们需要创建问卷的HTML结构。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>问卷调查Demo</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="questionnaire">
        <h1>问卷调查</h1>
        <form>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" required>
            <br><br>
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" required>
            <br><br>
            <label>性别：</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
            <br><br>
            <label for="interest">兴趣爱好：</label>
            <input type="checkbox" id="reading" name="interest" value="reading">
            <label for="reading">阅读</label>
            <input type="checkbox" id="music" name="interest" value="music">
            <label for="music">音乐</label>
            <input type="checkbox" id="travel" name="interest" value="travel">
            <label for="travel">旅游</label>
            <br><br>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

添加CSS样式

接下来，我们为问卷添加一些CSS样式，使其更加美观。以下是一个简单的例子：

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

#questionnaire {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input[type="text"],
input[type="number"],
input[type="submit"] {
    margin-top: 5px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 5px;
}

添加jQuery交互

现在，我们使用jQuery为问卷添加一些交互功能。以下是一个简单的例子：

// script.js
$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        var name = $('#name').val();
        var age = $('#age').val();
        var gender = $('input[name="gender"]:checked').val();
        var interest = [];
        $('input[name="interest"]:checked').each(function() {
            interest.push($(this).val());
        });
        // 处理提交逻辑
        console.log(name, age, gender, interest);
        alert('提交成功！');
    });
});

总结

通过以上步骤，您已经成功创建了一个简单的问卷调查Demo。在实际应用中，您可以根据需要添加更多的功能，如数据统计、图表展示等。希望本文能帮助您轻松打造自己的问卷调查系统。

-- 展开阅读全文 --