如何将所选复选框的值作为文本输入中的链接字符串发送到单击操作按钮的地方

如何解决如何将所选复选框的值作为文本输入中的链接字符串发送到单击操作按钮的地方

让我们假设我有一组复选框（不一定是表单的一部分）。在我的情况下为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 请帮忙！

如何将所选复选框的值作为文本输入中的链接字符串发送到单击操作按钮的地方

如何解决如何将所选复选框的值作为文本输入中的链接字符串发送到单击操作按钮的地方

相关推荐