如何用JavaScript为元素添加/移除HTML ID/类？附表单提交示例

下面是通过表单onsubmit事件触发验证函数，动态创建带指定ID的提示元素的完整实现：

HTML 结构 #

<form onsubmit="return validateCheckboxes(event)">
  <input type="checkbox" name="option" value="1"> 选项1
  <input type="checkbox" name="option" value="2"> 选项2
  <input type="checkbox" name="option" value="3"> 选项3
  <button type="submit">提交</button>
</form>
<!-- 用于展示提示信息的容器 -->
<div id="message-container"></div>

CSS 样式 #

#error {
  border: 0.5em red solid;
  padding: 0.5em;
  margin: 1em 0;
}

#correct {
  border: 0.5em green solid;
  padding: 0.5em;
  margin: 1em 0;
}

JavaScript 验证函数 #

function validateCheckboxes(event) {
  // 阻止表单默认提交行为，先完成验证
  event.preventDefault();
  
  // 获取所有复选框并判断是否有选中项
  const checkboxes = document.querySelectorAll('input[name="option"]');
  const hasCheckedItem = Array.from(checkboxes).some(item => item.checked);
  
  // 清空之前的提示信息
  const messageContainer = document.getElementById('message-container');
  messageContainer.innerHTML = '';
  
  // 创建提示元素
  const tipElement = document.createElement('p');
  
  if (!hasCheckedItem) {
    tipElement.id = 'error';
    tipElement.textContent = 'Must have at least one checkbox checked';
  } else {
    tipElement.id = 'correct';
    tipElement.textContent = 'At least one checkbox is checked';
    // 如果需要验证通过后提交表单，取消下面这行注释
    // event.target.submit();
  }
  
  // 将提示元素添加到页面中
  messageContainer.appendChild(tipElement);
}

关键说明 #

• 每次提交前清空提示容器，避免重复生成提示元素
• 通过createElement创建<p>元素后，直接为其设置id属性，对应CSS中定义的样式
• 使用event.preventDefault()阻止表单默认提交逻辑，优先完成验证和提示展示；若验证通过，可手动调用event.target.submit()提交表单

内容的提问来源于stack exchange，提问作者Meho buh