Angular中实现双输入框（姓/名）有内容时自动勾选CheckBox

场景1：单个输入框内容联动CheckBox #

当输入框有内容时自动勾选CheckBox，无内容则取消勾选，核心是监听输入框的输入事件，实时判断内容状态：

<!-- HTML结构 -->
<input type="text" id="singleInput" placeholder="输入内容">
<input type="checkbox" id="singleCheckbox" disabled>

// JavaScript逻辑
const singleInput = document.getElementById('singleInput');
const singleCheckbox = document.getElementById('singleCheckbox');

singleInput.addEventListener('input', () => {
  // 排除纯空格的情况，仅当有实际内容时勾选
  singleCheckbox.checked = singleInput.value.trim() !== '';
});

给CheckBox添加disabled属性是为了避免用户手动修改状态，确保状态完全由输入框内容控制。

场景2：两个输入框同时有内容才勾选CheckBox #

只有当名字、姓氏两个输入框都填写了非空内容时，才勾选CheckBox，否则保持未勾选：

<!-- HTML结构 -->
<input type="text" id="firstName" placeholder="名字">
<input type="text" id="lastName" placeholder="姓氏">
<input type="checkbox" id="doubleCheckbox" disabled>

// JavaScript逻辑
const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const doubleCheckbox = document.getElementById('doubleCheckbox');

// 封装统一的检查逻辑
function checkBothInputs() {
  const hasValidFirstName = firstName.value.trim() !== '';
  const hasValidLastName = lastName.value.trim() !== '';
  doubleCheckbox.checked = hasValidFirstName && hasValidLastName;
}

// 两个输入框内容变化时都触发检查
firstName.addEventListener('input', checkBothInputs);
lastName.addEventListener('input', checkBothInputs);

任意一个输入框的内容发生变化时，都会重新校验两个输入框的状态，只有两者都满足非空条件，CheckBox才会被勾选。

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