javascript - 如何在单击操作按钮时将选定复选框的值作为连接字符串发送到文本输入中

Question

假设我有一组复选框（不一定是表单的一部分）。在我的例子中，2 行，每行 16 个复选框。每个人都有自己独特的 ID、名称和价值。我需要一个操作按钮来向表单发送选定复选框的串联字符串，并向另一个输入发送选定框的数量（选中的计数）此输入是包含其他输入的表单的一部分。这是我的基本功能图： diagram of1 我的问题是如何以稳定和安全的方式实现这一点。JS，Jquery，其他方法？

谢谢，这是我的 html/Jsquery 工作：

//Select interval with Shift

$(document).ready(function() {
  var $chkboxes = $('.chkbox');
  var lastChecked = null;

  $chkboxes.click(function(e) {
    if (!lastChecked) {
      lastChecked = this;
      return;
    }

    if (e.shiftKey) {
      var start = $chkboxes.index(this);
      var end = $chkboxes.index(lastChecked);

      $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
    }

    lastChecked = this;
  });
});

//count checked
var form = document.getElementById('chart');
var checkBoxes = $(form).children('.chkbox');
var count = 0;

var divBoxesChecked = document.getElementById('boxesChecked');
divBoxesChecked.innerHTML = 0;

$(checkBoxes).on('change', function() {
  $.each(checkBoxes, function(i) {
    if (checkBoxes[i].checked) {
      count++;
    }
  });

  var qty = count;

  var seld = $('.chkbox:checked').map(function() {
      return this.value;
    })
    .get()
    .join(",");


  $("#transfercape").on('click', function() {
    var pid = 125;
    var price = 4;
    $('#productprice').val(price);
    $('#productID').val(pid);
    $('#elements').val(qty);
    $('#selectionprice').val(price * qty);

    $('#teeth').val(seld);

  });

  $("#transferbonturi").on('click', function() {
    var pid = 155;
    var price = 40;
    $('#productprice').val(price);
    $('#productID').val(pid);
    $('#elements').val(qty);
    $('#selectionprice').val(price * qty);

    $('#teeth').val(seld);

  });


  console.log(count);
  //console.log($('input[class=chkbox]:checked').val(","));
  divBoxesChecked.innerHTML = count + "  elemente selectate ";
  console.log(seld);

  count = 0;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="chart">
  <h1>Chart</h1>
  <input type="checkbox" class="chkbox" id="maxila18" name="maxila18" value="18">
  <label for="maxila1"> 18</label>
  <input type="checkbox" class="chkbox" id="maxila17" name="maxila17" value="17">
  <label for="maxila17">17</label>
  <input type="checkbox" class="chkbox" id="maxila16" name="maxila16" value="16">
  <label for="maxila16">16</label>
  <input type="checkbox" class="chkbox" id="maxila15" name="maxila15" value="15">
  <label for="maxila15"> 15</label>
  <input type="checkbox" class="chkbox" id="maxila14" name="maxila14" value="14">
  <label for="maxila14"> 14</label>
  <input type="checkbox" class="chkbox" id="maxila13" name="maxila13" value="13">
  <label for="maxila13"> 13</label>
  <input type="checkbox" class="chkbox" id="maxila12" name="maxila12" value="12">
  <label for="maxila12"> 12</label>
  <input type="checkbox" class="chkbox" id="maxila11" name="maxila11" value="11">
  <label for="maxila11"> 11</label>
  <input type="checkbox" class="chkbox" id="maxila21" name="maxila21" value="21">
  <label for="maxila21"> 21</label>
  <input type="checkbox" class="chkbox" id="maxila22" name="maxila22" value="22">
  <label for="maxila22"> 22</label>
  <input type="checkbox" class="chkbox" id="maxila23" name="maxila23" value="23">
  <label for="maxila23"> 23</label>
  <input type="checkbox" class="chkbox" id="maxila24" name="maxila24" value="24">
  <label for="maxila24"> 24</label>
  <input type="checkbox" class="chkbox" id="maxila25" name="maxila25" value="25">
  <label for="maxila25"> 25</label>
  <input type="checkbox" class="chkbox" id="maxila26" name="maxila26" value="26">
  <label for="maxila26"> 26</label>
  <input type="checkbox" class="chkbox" id="maxila27" name="maxila27" value="27">
  <label for="maxila27"> 27</label>
  <input type="checkbox" class="chkbox" id="maxila28" name="maxila28" value="28">
  <label for="maxila28"> 28</label>

  <br>

  <input type="checkbox" class="chkbox" id="mandible38" name="mandible38" value="38">
  <label for="mandible3"> 38</label>
  <input type="checkbox" class="chkbox" id="mandible37" name="mandible37" value="37">
  <label for="mandible37">37</label>
  <input type="checkbox" class="chkbox" id="mandible36" name="mandible36" value="36">
  <label for="mandible36">36</label>
  <input type="checkbox" class="chkbox" id="mandible35" name="mandible35" value="35">
  <label for="mandible35"> 35</label>
  <input type="checkbox" class="chkbox" id="mandible34" name="mandible34" value="34">
  <label for="mandible34"> 34</label>
  <input type="checkbox" class="chkbox" id="mandible33" name="mandible33" value="33">
  <label for="mandible33"> 33</label>
  <input type="checkbox" class="chkbox" id="mandible32" name="mandible32" value="32">
  <label for="mandible32"> 32</label>
  <input type="checkbox" class="chkbox" id="mandible31" name="mandible31" value="31">
  <label for="mandible31"> 31</label>
  <input type="checkbox" class="chkbox" id="mandible41" name="mandible41" value="41">
  <label for="mandible43"> 41</label>
  <input type="checkbox" class="chkbox" id="mandible42" name="mandible42" value="42">
  <label for="mandible42"> 42</label>
  <input type="checkbox" class="chkbox" id="mandible43" name="mandible43" value="43">
  <label for="mandible43"> 43</label>
  <input type="checkbox" class="chkbox" id="mandible44" name="mandible44" value="44">
  <label for="mandible44"> 44</label>
  <input type="checkbox" class="chkbox" id="mandible45" name="mandible45" value="45">
  <label for="mandible45"> 45</label>
  <input type="checkbox" class="chkbox" id="mandible46" name="mandible46" value="46">
  <label for="mandible46"> 46</label>
  <input type="checkbox" class="chkbox" id="mandible47" name="mandible47" value="47">
  <label for="mandible47"> 47</label>
  <input type="checkbox" class="chkbox" id="mandible48" name="mandible48" value="48">
  <label for="mandible48"> 48</label>

  <br>
</div>
<div>
  <h3> numar elemente selectate</h3>
  <div id="boxesChecked"> </div>

</div>
<input type="button" value="ADD CAPE" id="transfercape">!Cape CrCo(4euro) </input>
<input type="button" value="ADD Bonturi" id="transferbonturi">!Bonturi(40euro) </input>
<div id="container1">
  <form>
    <input type="text" / id="elements" placeholder="elements">
    <input type="text" / id="productID" placeholder="productID">
    <input type="text" / id="productprice" placeholder="productprice">
    <input type="text" / id="selectionprice" placeholder="selectionprice">
    <input type="text" / id="teeth" name="teeth " placeholder="teeth" value="">
  </form>
</div>

这实际上解决了主要问题，但我仍然不知道如何将连续选定框之间的连接分隔符从逗号替换为减号。.map() 函数返回的字符串需要有条件地更改连续选中框的分隔符。示例：选中：18 14 13 12 24 现在结果是：18, 14,13,12 ,24 但我需要是：18, 14-13-12 ,24 请帮忙！

标签： javascriptjquery