如何使用选中的复选框文本自动填充输入文本字段

How to auto fill-in an input text field with checked checkboxes text?

本文关键字：文本 输入 字段 填充 复选框 何使用      更新时间：2023-10-15

我有一组多个复选框，当我选中它们时，它们的标签文本需要在输入字段中以逗号分隔。但是，我不想在输入字段中显示这些值，因为它也用于搜索词。

目前，我可以使用按钮将复选框文本发送到输入字段，如下所示：

jQuery('#save_value').click(function() {
  var sel = jQuery('input[type=checkbox]:checked').map(function(_, el) {
   return jQuery(el).parent().text();
  }).get();
  jQuery("#s").val(sel);
});

但是A:我不应该有一个按钮，但一旦您检查了值（文本），就应该转到逗号分隔的输入字段，B:这些值当前显示在字段中，而我不想显示它们，以便在保留数据的同时保留空字段。

<label>
  <input type="checkbox">
  NY
</label>
<label>
  <input type="checkbox">
  LA
</label>
<input type="button" id="save_value" name="save_value" value="save"> <= I don't want this
<input id="s" type="text">
<inputtype="submit"> <= The submit should get all the data in the text field, even those data from the checked boxes that I am grabbing but that I don't want to display to the users

我认为你可以使用两个字段，一个用于接收用户输入，另一个用于将复选框和用户输入的组合数据发送到服务器，这样

<input id="checkIt" name="checkIt" name="s" type="hidden"/>
<input type="text" class="form-control" value="" id="s" placeholder="Search for..."/>

然后在表单中提交处理程序

jQuery('form').submit(function () {
    var sel = jQuery('input[type=checkbox]:checked').map(function (_, el) {
        return jQuery(el).parent().text().trim();
    }).get();
    var s = $('#s').val().trim();
    jQuery("#checkIt").val(sel.join()+ ',' + s);
});
相关文章：