首页 > 解决方案 > 如何获取选中复选框的列表?

问题描述

我正在使用 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++;
        })
      });
  });

标签: javascriptgoogle-cloud-firestore

解决方案


推荐阅读