JS新手求助：如何高效通过多个复选框更新多个文本框内容

问题背景 #

我是JavaScript新手，目前通过嵌套if逐个判断复选框状态的方式，实现了根据勾选情况更新多个文本框的功能，但代码繁琐冗余。需求是：每个复选框对应一个名称，勾选后需将对应名称添加到指定的一个或多个文本框中（部分名称需显示在多个文本框），想请教如何通过合理存储对应关系、遍历复选框的方式优化实现。

现有结构与代码 #

复选框列表

• Name 1
• Name 2
• Name 3
• Name 4
• Name 5

文本框对应关系表

HTML代码

复选框示例：

<p class="myText"><input type="checkbox" id="idName1" name="idName1" onclick="updateSigns()">Name 1</p>

文本框示例：

<div class="content" id="on"><h3>Sign 1</h3><p id="idSign1"></p></div>

当前JS实现

let N1 = '';
let N2 = '';
let text1 = '';
let text2 = '';

function updateSigns(){

let status = document.getElementById('idName1').checked;
let status2 = document.getElementById('idName2').checked;

console.log(status);

if(status==true){

    N1 = 'Name 1\n'
}
else if(status==false){

    N1 = '';
 }

 if (status2 ==true){
    N2 = 'Name 2\n';
 }
 else if(status2==false){
    N2= '';
 }

 text1 = N1 + N2;
 text2 = N2;

document.getElementById('Sign1').innerText = text1;
document.getElementById('Sign2').innerText = text2;


}

优化方案 #

核心思路

用配置对象统一存储名称与文本框的对应关系，批量获取并遍历复选框，根据勾选状态和配置更新目标文本框，彻底摆脱硬编码的判断逻辑。

步骤1：定义名称-文本框映射

创建一个对象，键为复选框对应的名称，值为该名称需要显示的文本框ID数组，对应关系完全匹配需求表：

// 配置名称对应的目标文本框ID数组
const nameToSignsMap = {
  'Name 1': ['idSign1', 'idSign3'],
  'Name 2': ['idSign1', 'idSign2', 'idSign3'],
  'Name 3': ['idSign3'],
  'Name 4': ['idSign2'],
  'Name 5': ['idSign1']
};

步骤2：优化HTML结构

给所有复选框添加统一类名name-checkbox，并通过data-name属性存储对应名称（避免从DOM文本中解析，更可靠）：

<p class="myText"><input type="checkbox" class="name-checkbox" data-name="Name 1" onclick="updateSigns()">Name 1</p>
<p class="myText"><input type="checkbox" class="name-checkbox" data-name="Name 2" onclick="updateSigns()">Name 2</p>
<p class="myText"><input type="checkbox" class="name-checkbox" data-name="Name 3" onclick="updateSigns()">Name 3</p>
<p class="myText"><input type="checkbox" class="name-checkbox" data-name="Name 4" onclick="updateSigns()">Name 4</p>
<p class="myText"><input type="checkbox" class="name-checkbox" data-name="Name 5" onclick="updateSigns()">Name 5</p>

步骤3：重写updateSigns函数

function updateSigns() {
  // 1. 先清空所有文本框内容
  const allSignIds = ['idSign1', 'idSign2', 'idSign3', 'idSign4'];
  allSignIds.forEach(id => {
    document.getElementById(id).innerText = '';
  });

  // 2. 获取所有已勾选的复选框
  const checkedBoxes = document.querySelectorAll('.name-checkbox:checked');

  // 3. 遍历勾选的复选框，更新对应文本框
  checkedBoxes.forEach(box => {
    const targetName = box.dataset.name;
    // 获取当前名称需要显示的文本框ID列表
    const targetSignIds = nameToSignsMap[targetName] || [];

    targetSignIds.forEach(signId => {
      const signElement = document.getElementById(signId);
      // 追加名称，已有内容则换行分隔
      signElement.innerText += signElement.innerText ? `\n${targetName}` : targetName;
    });
  });
}

优化优势

• 配置化管理：新增/修改名称与文本框的对应关系时，只需修改nameToSignsMap，无需改动逻辑代码
• 代码简洁：批量遍历复选框，避免大量重复的if判断
• 稳定性高：用data-name存储名称，比解析DOM文本更可靠
• 易维护：逻辑清晰，后续扩展新的复选框或文本框成本极低

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