如何使用選中的復選框文本自動填寫輸入文本字段？

Question

我有一組多個復選框，當我選中它們時，它們的標簽文本需要在輸入字段中以逗號分隔。 但是，我不想在輸入字段中顯示這些值，因為它也用於搜索詞。

目前，我可以使用按鈕抓取復選框文本，將其發送到輸入字段，如下所示：

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

Answer 1

我認為您可以使用2個字段，其中1個用於接收用戶輸入，其他用於將復選框和用戶輸入的組合數據發送到服務器，因此

<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);
});