根据复选框检查删除文本框值

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

不是在复选框为 checked/unchecked 时维护值，而是一种更简单的模式，即在所有复选框上放置一个通用的 class，您可以随时使用它来构建值数组一个变化。然后可以将其连接成一个字符串并设置为文本框的值。像这样：

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

Answer 2

老实说，这不是您所做的最佳实践，但您可以简单地这样做：

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 + "   ","");
}

根据复选框检查删除文本框值

Remove Textbox Value based on Checkbox Check

javascript

jquery

jquery-ui