我在一个页面上有多个按钮，用户可以从中进行选择。如何获取JSON格式选择数据？
我在一个页面上有多个按钮，用户可以从中进行选择。如何获取JSON格式选择数据？
提问于 2020-07-01 21:39:06
我做了一个测验，其中的选项是html按钮。如何将用户在按下下一步之前选择的按钮的数据转换为JSON格式？还有更多的问题页面，其中的数据应该动态地添加到JSON中，直到单击最终的提交按钮。提前感谢！
下面是可用的代码笔：https://codepen.io/sikapoor/pen/ZEQajzx
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/crafty_favicon.svg">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.2/dist/tailwind.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,600i,700&display=swap" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168037965-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-168037965-1');
</script>
</head>
<body class=" font-custom min-h-screen">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
<div class = "flex flex-wrap justify-around pt-10">
<div class = "p-5">
<div class="p-5" x-data="{ active: false }">
<button :class="{ 'bg-green-200': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
Option1
</div>
</button>
</div>
<div class = "p-5">
<div class="p-5" x-data="{ active: false }">
<button :class="{ 'bg-green-200': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
Option2
</div>
</button>
</div>
<div class = "p-5">
<div class="p-5" x-data="{ active: false }">
<button :class="{ 'bg-green-200': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
Option3
</div>
</button>
</div>
<div class = "p-5">
<div class="p-5" x-data="{ active: false }">
<button :class="{ 'bg-green-200': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
Option4
</div>
</button>
</div>
<div class = "p-5">
<div class="p-5" x-data="{ active: false }">
<button :class="{ 'bg-green-200': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
Option5
</div>
</button>
</div>
</div>
<div class = "text-center pt-10">
<a href="page3.html" class = "px-20 py-5 bg-yellow-500 hover:bg-yellow-600 border-black rounded text-black font-bold w-48">
Next
</a>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>```回答 1
Stack Overflow用户
发布于 2020-07-14 00:06:16
您应该为整个表单使用一个x-data，而不是每个按钮都有一个新的x-data。您的按钮将在单击时更新x-data
<div class="flex ..." x-data="{question_1_active: false, question_2_active: false}">
<button :class="{ 'bg-green-200': question_1_active }">然后，您的submit按钮可以访问所有字段。您可以对字段进行json化，然后将它们提交给服务器。
<button x-on:click="fetch('/your_endpoint', {
method: 'POST,
body: JSON.stringify({
'question_1_active': question_1_active,
'question_2_active': question_2_active,
}
})">您还可以考虑使用选择标记或复选框，这将允许您使用x-model，而不是查看每次单击是否有更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62678173
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号