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

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函数。 因此，对于复选框中的每个更改，如果已选中“当前”更改的复选框 - 添加输入。

检查这个工作 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>"
    );  
  }
});

Answer 2

下面的代码简化了：

它的目标是所有的复选框，并检查是否复选框被checked使用is(:checked)或没有。 如果是，则添加输入，否则将其删除。

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

 <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 3

使用 vanilla Javascript，这是我的方法。 如果有任何不清楚的地方，请随时提出问题。

 const myletters = document.getElementById('myletters'); const inputContainer = document.getElementById('inputs'); const inputs = [...myletters.querySelectorAll('input')].reduce((acc, val)=> { const input = document.createElement('input'); // create an input for each checkbox input.id = `${val.id}_school`; input.placeholder = `${val.id}_school`; return { ...acc, [val.id]: input }; // and store it in an object under the checkbox id as key }, {}); myletters.addEventListener('change', ({target: cb}) => { if (cb.checked) { inputContainer.appendChild(inputs[cb.id]); } else { inputContainer.removeChild(inputs[cb.id]); } })

 #inputs { display: flex; flex-direction: column; }

 <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> <div id="inputs"></div>

Answer 4

我认为您可能也不希望它多次创建相同的。

所以这可能就是你想要的：

 $("input[name='letters']").on("change", function(e) { if($(this).is(":checked") && !($(this).next("label").length > 0) ) { var letterChecked = $(this).attr("id"); $(this).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>

这里我们还要检查它是否已经存在。 它在尝试再次添加之前正在验证。

延期

如果您希望它在取消选择时删除。 （我知道你没有要求它:)）

您可以添加 else 条件并将其删除。

 $("input[name='letters']").on("change", function(e) { if($(this).is(":checked") && !($(this).next("label").length > 0) ) { var letterChecked = $(this).attr("id"); $(this).after( "<label id='" + letterChecked + "-school-label'>Please enter your " + letterChecked + " school<input id='" + letterChecked + "-school' type='text'></input></label>"); } else { $(this).nextAll("label").remove(); } });

 <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>

希望这对你有帮助！