Удалить значение текстового поля на основе флажка

Question

У меня есть динамически созданный флажок. Когда я нажимаю на него, значение добавляется в текстовое поле. Это работает отлично.

Как удалить это значение, если снять флажок?

var ChkId = stringSplit[0];
var ChkName = stringSplit[1];
var checkLevel1 = $('input:checkbox[name=LevelOne' + ChkId + ']').is(':checked');
if (checkLevel1 == true) {
  var txtLevel1 = $("#<%= txtSectionData.ClientID %>").val();
  $("#<%= txtSectionData.ClientID %>").val(txtLevel1 + ChkName + "   ");
} else {
}

Answer 1

Не самая лучшая практика в том, что вы делаете, если честно, но вы можете просто сделать это так:

var ChkId = stringSplit[0];
var ChkName = stringSplit[1];
var checkLevel1 = $('input:checkbox[name=LevelOne' + ChkId + ']').is(':checked');
var txtLevel1 = $("#<%= txtSectionData.ClientID %>").val();
if (checkLevel1 == true) {
  $("#<%= txtSectionData.ClientID %>").val(txtLevel1 + ChkName + "   ");
} else {
  $("#<%= txtSectionData.ClientID %>").val(txtLevel1.replace(ChkName + "   ","");
}

Answer 2

Вместо сохранения значений, когда флажок установлен / снят, гораздо проще использовать общий класс для всех флажков, которые можно использовать для создания массива значений при каждом изменении. Затем его можно объединить в одну строку и установить в качестве значения текстового поля. Как то так:

$(document).on('change', '.level-one', function() {
  var values = $('.level-one:checked').map((i, e) => e.value).get().join(', ');
  $('#section-data').val(values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type="checkbox" class="level-one" value="foo" /> Foo
</label>
<label>
  <input type="checkbox" class="level-one" value="bar" /> Bar
</label>
<label>
  <input type="checkbox" class="level-one" value="fizz" /> Fizz
</label>
<label>
  <input type="checkbox" class="level-one" value="buzz" /> Buzz
</label>
<input type="text" id="section-data" />