javascript - 如何获取选中复选框的列表?
问题描述
我正在使用 Javascript 创建一个 HTML 表单,其中包含一些单选按钮问题和一个最后的复选框问题。我使用 JavaScript 的原因是这些问题从 google cloud firestore 数据库中获取数据,并且它们需要是动态的。当我从单选按钮获取数据时,它会将其显示为字符串,但是当我从复选框获取数据时,它会将其留空。我希望它显示一个带有选中框列表的字符串。这是我的代码:
const OACanList = document.querySelector('#OAInput');
const setupOACans = (data) => {
let html = '';
if (data.length) {
data.forEach(doc => {
const OACan = doc.data();
const li = `
<style>
#OAInput [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: static;
opacity: 1;
pointer-events: initial;
}
</style>
<input type="checkbox" name="OAElection" value="${OACan.name}" style="display:block opacity:1;">${OACan.name}
<br>
`;
html += li
});
OACanList.innerHTML = html;
} else {
OACanList.innerHTML = html;
};
};
index.js:
const voteForm = document.querySelector('#vote-form');
voteForm.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('ballots').add({
OA: voteForm.OAElection.value
}).then(() => {
const modal = document.querySelector('#modal-vote');
M.Modal.getInstance(modal).close();
voteForm.reset();
}).then(() => {
const docRef = db.collection('users').doc(auth.currentUser.uid);
docRef.get().then(function(doc) {
doc.data().count++;
})
});
});
解决方案
推荐阅读
- google-cloud-platform - 如何将图像从 ESP32 CAM 发送到 IoT Core?
- .net - TFS 2017 缺少用于指定 CI 触发器的“路径过滤器”?
- javascript - 从 AWS 事件中检索标签的通用方法
- c# - 如何使用 ReactiveUI 正确取消 ViewModel 停用任务?
- python - 重新编辑 json 文件时的随机/空字符
- razor - 在剃须刀页面中使用超过一定长度的路由参数导致无效的 url 错误
- php - 如何在php中跳过几行Excel文件?
- python - 根据 plotly 上的当前屏幕数据更改 y 轴的范围
- c++ - 优化 Q3DBars 图
- java - 解释和编译语言