使用纯JavaScript结合SmtpJS获取表单复选框值并发送邮件的问题

1 修正HTML复选框配置 #

你当前的复选框未设置value属性，即使获取到选中状态也无法拿到对应值，先补充属性：

<div class="form-group">
 <label class="contact_us_title">Name</label>
 <input type="text" class="form-control" id="name" placeholder="Name">
</div>

<div class="form-group">
 <label class="contact_us_title">Question</label>
   <div>
     <label class="checkbox-inline"><input type="checkbox" value="Ａ">Ａ</label>
     <label class="checkbox-inline"><input type="checkbox" value="Ｂ">Ｂ</label>
     <label class="checkbox-inline"><input type="checkbox" value="Ｃ">Ｃ</label>
   </div>
</div>

2 修改JS逻辑获取选中值 #

通过选择器匹配所有处于选中状态的复选框，提取值后拼接进邮件正文即可：

<script>
function sendMail() {
  // 获取文本输入框值
  let fields = {
    name: document.querySelector("#name").value,
  };
  // 获取选中的复选框
  const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
  // 拼接选中值，无选中时显示默认提示
  const selectedQuestions = checkedBoxes.length 
    ? Array.from(checkedBoxes).map(box => box.value).join('、') 
    : '未选择';
  // 拼接完整邮件正文
  let body = `Name：${fields.name}\nQuestion：${selectedQuestions}`;
  Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject: "title",
    Body: body,
  }).then(
          message => alert(message)
  );
}
</script>

补充提示 #

• 如果页面存在其他复选框，建议给这三个问题复选框添加统一类名（比如class="question-checkbox"），然后将选择器替换为.question-checkbox:checked，避免匹配到无关元素。

内容的提问来源于stack exchange，提问作者Krystal Tabo