如何实现单个Checkbox勾选触发操作及取消勾选移除输入框

嘿，我来帮你搞定这两个问题！先说说你遇到的重复生成输入框的原因：你的代码在change事件触发时，会遍历所有已勾选的checkbox，所以每次勾选新选项时，之前已经选中的那些也会再次执行添加输入框的操作，自然就会重复生成啦。另外取消勾选的逻辑也很简单，只要判断当前checkbox未选中时，移除对应的输入框就行。

修改后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myletters">
  A<input type="checkbox" name="letters" value="A" id="A" />
  B<input type="checkbox" name="letters" value="B" id="B" />
  C<input type="checkbox" name="letters" value="C" id="C" />
</div>

（注：我把你原来混乱的checkbox id修正了，让id和对应字母一致，这样逻辑更清晰）

jQuery部分

$("#myletters").on('change', 'input[name="letters"]', function(e) {
  const $currentCheckbox = $(this);
  const letterChecked = $currentCheckbox.attr("id");
  const targetLabelId = `${letterChecked}-school-label`;

  if ($currentCheckbox.is(':checked')) {
    // 先检查是否已经存在对应的输入框，不存在才添加
    if (!$("#" + targetLabelId).length) {
      $currentCheckbox.after(`<label id="${targetLabelId}">Please enter your ${letterChecked} school<input id="${letterChecked}-school" type="text"></input></label>`);
    }
  } else {
    // 取消勾选时移除对应的输入框
    $("#" + targetLabelId).remove();
  }
});

关键逻辑说明 #

• 把事件绑定到单个checkbox上（用on('change', 'input[name="letters"]'），这样每次只处理当前点击的那个checkbox，不会遍历所有选中项。
• 勾选时先判断对应的label是否存在（通过$("#" + targetLabelId).length），只有不存在的时候才添加，避免重复生成。
• 取消勾选时，直接通过id找到对应的label元素，用remove()方法移除即可。

这样修改后，每个checkbox只会对应一个输入框，取消勾选时也会自动删掉对应的输入框啦！

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