javascript - 如何只触发一个复选框检查操作

Question

我有一组复选框和一个在选中时添加输入的函数。我遇到的问题是出现多个输入，而不是每个复选框一个。

$("#myletters").change(function(e) {
  $("input[name='letters']:checked").each(function() {
    var letterChecked = $(this).attr("id");
    console.log(letterChecked);
    $("#" + letterChecked).after(
      "<label id='" +
        letterChecked +
        "-school-label'>Please enter your " +
        letterChecked +
        " school<input id='" +
        letterChecked +
        "-school' type='text'></input></label>"
    );
  });
});

<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="C" />
  B<input type="checkbox" name="letters" value="B" id="B" />
  C<input type="checkbox" name="letters" value="C" id="A" />
</div>

如果未选中，我应该使用什么函数来删除输入？

Answer 1

嗯。对于每次更改，您都为每个复选框运行一个函数。 如果我之前选中了一个复选框，那么它就会被选中，并且您的函数与所有选中的复选框相关。

我建议仅运行该函数一次，而不是使用 .each 函数。因此，对于复选框中的每个更改，如果已选中“当前”更改复选框 - 添加输入。

检查这个working jsfiddle .

$('#myletters input[type="checkbox"]').change(function(e) {
  if($(this).is(':checked')) {
    var letterChecked = $(this).attr("id");
    console.log(letterChecked);
    $("#" + letterChecked).after(
      "<label id='" +
        letterChecked +
        "-school-label'>Please enter your " +
        letterChecked +
        " school<input id='" +
        letterChecked +
        "-school' type='text'></input></label>"
    );  
  }
});