根据Yes/No选项移除指定HTML字段的JS实现需求

嘿，我来帮你解决这个动态移除字段的需求！首先得提个小坑：你说有两个名称和ID都是cstore_limit的字段，这其实不符合HTML规范——ID在页面里必须是唯一的，不然用JS操作的时候很容易出问题（比如getElementById只会拿到第一个匹配的元素）。所以我先给你一个规范且好用的解决方案，如果你实在要保留原ID，后面也会给你变通的办法。

第一步：调整HTML结构（推荐规范版） #

先把两个输入框的ID改成唯一的，name可以保留cstore_limit不影响提交。示例结构如下：

<!-- Yes/No 单选选择区 -->
<div class="selection-group">
  <label>
    <input type="radio" name="yes_no_choice" value="yes" checked> 选择Yes
  </label>
  <label>
    <input type="radio" name="yes_no_choice" value="no"> 选择No
  </label>
</div>

<!-- Yes对应的输入框容器 -->
<div id="yes_input_wrap">
  <label>Yes专属输入：</label>
  <input type="text" name="cstore_limit" id="cstore_limit_yes" placeholder="输入Yes对应的值">
</div>

<!-- No对应的输入框容器 -->
<div id="no_input_wrap" style="display: none;">
  <label>No专属输入：</label>
  <input type="text" name="cstore_limit" id="cstore_limit_no" placeholder="输入No对应的值">
</div>

第二步：编写JS逻辑实现动态切换 #

用原生JS就能搞定，不用依赖框架。核心思路是监听单选按钮的change事件，根据选中的值显示/隐藏对应容器，同时清空未显示输入框的值避免提交冗余数据：

// 获取需要操作的DOM元素
const radioOptions = document.querySelectorAll('input[name="yes_no_choice"]');
const yesInputWrap = document.getElementById('yes_input_wrap');
const noInputWrap = document.getElementById('no_input_wrap');
const yesInput = document.getElementById('cstore_limit_yes');
const noInput = document.getElementById('cstore_limit_no');

// 定义切换函数
function switchInputFields(selectedVal) {
  if (selectedVal === 'yes') {
    // 显示Yes的输入框，隐藏No的
    yesInputWrap.style.display = 'block';
    noInputWrap.style.display = 'none';
    // 清空No输入框的内容，防止提交旧数据
    noInput.value = '';
  } else {
    // 显示No的输入框，隐藏Yes的
    noInputWrap.style.display = 'block';
    yesInputWrap.style.display = 'none';
    yesInput.value = '';
  }
}

// 页面加载时先执行一次，匹配默认选中的选项
switchInputFields(document.querySelector('input[name="yes_no_choice"]:checked').value);

// 给每个单选按钮绑定切换事件
radioOptions.forEach(radio => {
  radio.addEventListener('change', function() {
    switchInputFields(this.value);
  });
});

如果非要保留相同ID的变通方案（不推荐） #

如果因为某些原因不能改ID，那可以通过父容器或者元素位置来区分两个cstore_limit字段，比如：

// 获取所有ID为cstore_limit的元素
const cstoreFields = document.querySelectorAll('[id="cstore_limit"]');
// 假设第一个是Yes对应的，第二个是No对应的
const yesField = cstoreFields[0];
const noField = cstoreFields[1];

// 然后在切换函数里操作它们的父容器或者直接操作元素的display
function switchInputFields(selectedVal) {
  if (selectedVal === 'yes') {
    yesField.parentElement.style.display = 'block';
    noField.parentElement.style.display = 'none';
    noField.value = '';
  } else {
    noField.parentElement.style.display = 'block';
    yesField.parentElement.style.display = 'none';
    yesField.value = '';
  }
}

但还是强烈建议修改ID，否则后续维护或者其他JS操作很容易踩坑。

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