如何将按钮的值传入HTML表单中的复选框？

看起来你卡在了动态值传递这一步，结合你给出的代码片段，我大概率能猜到问题出在哪——要么是没给按钮绑定触发逻辑，要么是操作DOM时机不对。咱们一步步来搞定：

1. 先确保表单和元素能被正确访问 #

从你的代码看，你是用字符串拼接生成表单的对吧？那一定要记得把生成的表单先插入到页面DOM中，不然你根本拿不到那个#day复选框元素。比如：

var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
// 先补全表单字符串，顺便加个带特定值的按钮
var theForm = '<form class="" action="insert.php" method="post">' +
  '<input id="day" type="checkbox" name="day" value="">' +
  '<button class="set-day-btn" value="' + months[showDate.getMonth()] + '">点击设置月份值</button>' +
'</form>';

// 把表单插入到页面（比如插入到body或者某个容器里）
document.body.innerHTML = theForm;

2. 给按钮绑定点击事件，传递值到复选框 #

这是核心步骤——当用户点击按钮时，把按钮的value赋值给复选框的value属性。如果需要的话，还可以自动勾选复选框：

// 获取按钮和复选框元素
const setBtn = document.querySelector('.set-day-btn');
const dayCheckbox = document.getElementById('day');

// 绑定点击事件
setBtn.addEventListener('click', function(e) {
  // 重点：阻止表单默认提交行为，不然页面会刷新，看不到效果
  e.preventDefault();
  
  // 把按钮的值赋值给复选框
  dayCheckbox.value = this.value;
  
  // 可选：如果需要自动勾选复选框，加上这行
  dayCheckbox.checked = true;
});

3. 如果是动态生成按钮的情况 #

要是你的按钮是通过专门的函数批量创建的，那最好在创建按钮的时候就直接绑定事件，避免后续找不到元素：

// 封装创建带值按钮的函数
function createValueButton(buttonValue) {
  const btn = document.createElement('button');
  btn.textContent = '设置复选框值';
  btn.value = buttonValue;
  
  // 创建时就绑定点击逻辑
  btn.addEventListener('click', function() {
    const targetCheckbox = document.getElementById('day');
    targetCheckbox.value = this.value;
    targetCheckbox.checked = true;
  });
  
  return btn;
}

// 调用函数生成按钮（比如用当前月份）
const currentMonth = months[showDate.getMonth()];
const customBtn = createValueButton(currentMonth);
// 把按钮加到表单里
document.querySelector('form').appendChild(customBtn);

几个容易踩的坑 #

• 检查元素ID/类名拼写：别把#day写成#days，这种低级错误很常见。
• 操作DOM的时机：一定要等元素插入到页面后再去获取和操作，不然会拿到null。
• 表单提交的干扰：按钮在表单里的话，点击会默认提交表单刷新页面，必须加e.preventDefault()。

按这个思路调整代码，应该就能实现你要的效果了，有其他细节问题可以再补充~

内容的提问来源于stack exchange，提问作者Jane Hansen