Как получить только одно действие флажка флажка для запуска

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

Я думаю, вы, возможно, не захотите, чтобы он многократно создавал один и тот же.

Так что это может быть все, что вы хотите:

$("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>

Здесь мы также проверяем, существует ли он уже. проверяет , прежде чем попытается добавить его снова.

Расширение

Если вы хотите удалить его при отмене выбора. (Я знаю, что вы не просили об этом:))

Вы можете добавить еще условие и удалить его.

$("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>

Надеюсь, это поможет вам!

Answer 3

Используя ваниль 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

Следующий код упрощает:

Он нацелен на все флажки и проверяет, установлен ли флажок 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>