表单内多Radio按钮切换对应输入字段失效问题求助

问题背景 #

需要在单个<form>内设置5-6个单选按钮，每个按钮选中时显示对应的独立输入字段。目前已实现「添加新客户」「选择已有客户」两个按钮的切换，但新增第三个按钮后，仅第一个按钮能正常触发显示，其余按钮切换功能失效。

问题原因 #

原customerCheck()函数仅做二元判断：仅检查newCustomer是否选中，否则直接显示existCustomerForm，完全未考虑新增的其他单选按钮，导致选中新增按钮时仍会执行else分支，显示错误的表单。

解决方案 #

重构customerCheck()函数，改为根据选中的单选按钮ID匹配对应表单，同时给所有客户表单统一添加类名，方便批量隐藏。后续新增任意数量的单选按钮和对应表单，都不需要修改JS核心逻辑，扩展性更强。

修改后的JavaScript代码 #

function customerCheck() {
  // 获取所有name为customer的单选按钮
  const radios = document.querySelectorAll('input[name="customer"]');
  // 获取所有客户表单容器
  const customerForms = document.querySelectorAll('.customer-form');
  
  // 先隐藏所有客户表单
  customerForms.forEach(form => {
    form.style.visibility = 'hidden';
  });

  // 找到选中的单选按钮
  const selectedRadio = Array.from(radios).find(radio => radio.checked);
  if (selectedRadio) {
    // 根据单选按钮ID拼接对应表单ID（比如newCustomer对应newCustomerForm）
    const targetFormId = `${selectedRadio.id}Form`;
    const targetForm = document.getElementById(targetFormId);
    if (targetForm) {
      targetForm.style.visibility = 'visible';
    }
  }
}

function toggleHiddenContent() {
  var hiddenContent = document.querySelector('.hidden-content');
  var readMoreBtn = document.getElementById('readMoreBtn');

  if (hiddenContent.style.display === 'none') {
    hiddenContent.style.display = 'block';
    readMoreBtn.textContent = '收起更多信息';
  } else {
    hiddenContent.style.display = 'none';
    readMoreBtn.textContent = '添加更多信息';
  }
}

修改后的HTML代码（新增第三个单选按钮及对应表单） #

<div class="content-wrapper">
  <div class="row row1-new-service">
    <h2>创建服务记录</h2>
  </div>
  <section>
    <div class="row row2-new-service">
      <div class="col-lg-8 col-sm-12 addservice-col1">
        <h1>客户信息</h1>
        <div class="inner-row col2-section">
          <!-- 客户信息开始 -->
          <div class="col2-section-col1" style="margin-bottom:100px;">
            <h2>联系信息</h2>
            <p>服务登记必须填写客户信息。如需选择老客户，请点击「选择已有客户」按钮。</p>
          </div>
          <div class="col2-section-col2" style="margin-bottom:50px;">
            <form>
              <!-- 客户单选按钮组 -->
              <label style="margin-right:10px; font-weight:600 !important;">
                <input type="radio" onclick="customerCheck();" name="customer" value="1" id="newCustomer" checked="checked">
                添加新客户
              </label>
              <label style="font-weight:600 !important">
                <input type="radio" onclick="customerCheck();" name="customer" id="existCustomer">
                选择已有客户
              </label>
              <!-- 新增第三个单选按钮 -->
              <label style="font-weight:600 !important; margin-left:10px;">
                <input type="radio" onclick="customerCheck();" name="customer" id="referralCustomer">
                客户转介绍
              </label><br>
              <!-- ./客户单选按钮组 -->

              <!-- 添加新客户表单 -->
              <div id="newCustomerForm" style="visibility: visible" class="customer-form">
                <div class="form-group1" style="margin-top:0px !important;">
                  <label for="name"><span style="font-size:18px; font-weight:600;">姓名/地址<span style="color:#ff0000;">*</span></span></label>
                  <input type="text" class="form-control1" id="name" placeholder="输入客户姓名或公司名称" name="name" aria-describedby="emailHelp" required>
                </div>
                <!-- 可添加更多新客户输入字段 -->
              </div>
              <!-- ./添加新客户表单 -->

              <!-- 选择已有客户表单 -->
              <div id="existCustomerForm" style="visibility: hidden" class="customer-form">
                <div class="form-group1">
                  <label for="existingCustomer"><span style="font-size:18px; font-weight:600;">选择已有客户</span></label>
                  <select id="existingCustomer" class="form-control1">
                    <!-- 已有客户选项 -->
                  </select>
                </div>
                <!-- 可添加更多已有客户输入字段 -->
              </div>
              <!-- ./选择已有客户表单 -->

              <!-- 客户转介绍表单（新增） -->
              <div id="referralCustomerForm" style="visibility: hidden" class="customer-form">
                <div class="form-group1">
                  <label for="referralName"><span style="font-size:18px; font-weight:600;">推荐人姓名</span></label>
                  <input type="text" class="form-control1" id="referralName" placeholder="输入推荐客户姓名" name="referralName">
                </div>
                <div class="form-group1">
                  <label for="referralContact"><span style="font-size:18px; font-weight:600;">推荐人联系方式</span></label>
                  <input type="text" class="form-control1" id="referralContact" placeholder="输入推荐人手机号" name="referralContact">
                </div>
                <!-- 可添加更多转介绍相关输入字段 -->
              </div>
              <!-- ./客户转介绍表单 -->

              <!-- 更多信息按钮 -->
              <button type="button" id="readMoreBtn" onclick="toggleHiddenContent()" class="add-more-btn">添加更多信息</button>

              <!-- 隐藏内容 -->
              <div class="hidden-content" style="display:none;">
                <!-- 额外输入字段 -->
              </div>
              <!-- ./隐藏内容 -->
            </form>
          </div>
        </div>
        <!-- 终端用户信息开始 -->
        <div class="inner-row col2-section" style="margin-top:-80px;">
          <div class="col2-section-col1">
            <h2>终端用户</h2>
            <p>如果产品属于经销商客户，可在此输入姓名信息。</p>
          </div>
          <div class="col2-section-col2">
            <div class="form-group1" style="margin-top:0px !important;">
              <label for="surname"><span style="font-size:18px; font-weight:600;">姓氏</span></label>
              <input type="text" class="form-control1" id="surname" placeholder="产品所有者姓名" name="surname" aria-describedby="emailHelp">
            </div>
          </div>
        </div>
        <!-- 终端用户信息结束 -->
      </div>
      <div class="col-lg-3 col-sm-12 addservice-col2">
        <h2>操作</h2>
        <p>您想执行什么操作？</p>
        <div class="inner-row row inner-button">
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </section>
</div>

扩展说明 #

后续新增更多单选按钮时，只需遵循以下规则：

• 单选按钮的ID设为xxxCustomer
• 对应表单的ID设为xxxCustomerForm
• 给表单添加customer-form类名
• 给单选按钮绑定onclick="customerCheck();"即可，无需修改JS逻辑

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