时间戳

首页 > 解决方案 > 如何在输入中添加删除一组逗号分隔值？

javascript - 如何在输入中添加删除一组逗号分隔值？

问题描述

HTML

<div class="wrap_temi">
    <ul class="list-inline list-unstyled">
        <li class="list-inline-item">
            <input type="checkbox" value="amici" autocomplete="off">  Amici
        </li>
        <li class="list-inline-item">
            <input type="checkbox" value="bacio" autocomplete="off">  Bacio
        </li>
    </ul>
</div>

<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

我需要能够根据输入在输入中添加/删除标签amici, bacio

我尝试使用.map()但我不熟悉它或遵循这个答案，但我不确定如何将它应用到我的案例中。

标签： javascriptjqueryhtml

解决方案

这是一种检索valueusing的方法map。

用于:checked取回选定的选项：-

$('.wrap_temi [type="checkbox"]').change(function(){

  var tags = $('.wrap_temi [type="checkbox"]:checked')
  .toArray()
  .map(x => x.value)
  .join(', ');
  
  $('#usp-tags').val(tags);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap_temi">
    <ul class="list-inline list-unstyled">
        <li class="list-inline-item">
            <input type="checkbox" value="amici" autocomplete="off">  Amici
        </li>
        <li class="list-inline-item">
            <input type="checkbox" value="bacio" autocomplete="off">  Bacio
        </li>
    </ul>
</div>

<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

推荐阅读