简单表单:如何在集合关联中的每个复选框的文本值周围添加span标记

<form>
  <label>
    <input type="checkbox" name="option1" value="Option 1">
    Option 1
  </label>
  <label>
    <input type="checkbox" name="option2" value="Option 2">
    Option 2
  </label>
  <label>
    <input type="checkbox" name="option3" value="Option 3">
    Option 3
  </label>
</form>

// 获取所有复选框的label元素
var labels = document.querySelectorAll('form label');

// 遍历每个label元素
labels.forEach(function(label) {
  // 获取label元素的文本值
  var labelText = label.textContent.trim();
  
  // 创建一个新的span元素
  var span = document.createElement('span');
  
  // 将span元素的文本内容设置为label元素的文本值
  span.textContent = labelText;
  
  // 清空label元素的文本内容
  label.textContent = '';
  
  // 将span元素添加到label元素中
  label.appendChild(span);
});

/* 设置span元素的样式 */
form label span {
  background-color: #f2f2f2;
  padding: 2px 5px;
  border-radius: 3px;
}