勾选checkbox时如何自动为Website文本框填充对应内容

第一步：编写HTML结构 #

给所有复选框添加统一类名和自定义属性存储对应填充值，给Website输入框添加唯一ID方便定位：

<!-- Website输入框 -->
<label for="websiteInput">Website:</label>
<input type="text" id="websiteInput" name="website">

<!-- 复选框组 -->
<div class="checkbox-group">
  <label><input type="checkbox" class="website-checkbox" data-website-value="https://example.com/option1"> 选项1</label>
  <label><input type="checkbox" class="website-checkbox" data-website-value="https://example.com/option2"> 选项2</label>
  <label><input type="checkbox" class="website-checkbox" data-website-value="https://example.com/option3"> 选项3</label>
  <label><input type="checkbox" class="website-checkbox" data-website-value="https://example.com/option4"> 选项4</label>
  <label><input type="checkbox" class="website-checkbox" data-website-value="https://example.com/option5"> 选项5</label>
</div>

第二步：编写JS交互逻辑 #

这里提供两种常见场景的实现：

场景1：多选时拼接所有选中项的对应文本，用逗号分隔 #

// 获取所有复选框和输入框元素
const checkboxes = document.querySelectorAll('.website-checkbox');
const websiteInput = document.getElementById('websiteInput');

// 给每个复选框绑定change事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateWebsiteInput);
});

// 更新输入框内容的方法
function updateWebsiteInput() {
  // 收集所有选中复选框的对应值
  const selectedValues = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.dataset.websiteValue);
  // 拼接后赋值给输入框，没有选中则清空
  websiteInput.value = selectedValues.join(',');
}

场景2：每次只保留最新选中项的对应文本（类似单选逻辑） #

const checkboxes = document.querySelectorAll('.website-checkbox');
const websiteInput = document.getElementById('websiteInput');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      // 选中时直接覆盖输入框内容
      websiteInput.value = checkbox.dataset.websiteValue;
      // 如果需要同时取消其他复选框选中，加下面这段
      checkboxes.forEach(otherCb => {
        if (otherCb !== checkbox) otherCb.checked = false;
      })
    } else {
      // 取消选中时清空
      websiteInput.value = '';
    }
  });
});

可选优化 #

如果要支持自定义拼接分隔符，只需要修改join方法的参数即可，比如用换行符join('\n')、竖线join('|')等。

内容的提问来源于stack exchange，提问作者J Monn