jQuery输出两个复选框逗号分隔另一个复选框的数据值答案

【问题标题】：jQuery to output data value of two checkbox comma separated on another checkboxjQuery输出两个复选框逗号分隔另一个复选框的数据值
【发布时间】：2017-06-16 11:25:21
【问题描述】：

假设我有两个这样的复选框（可以是 100 个复选框，因为它将在一个 while 循环中出现）

<input type="checkbox" value="20" data="Apple">
<input type="checkbox" value="30" data="Mango">

我有两个文本框，我想在其中输出值 20+30 = 50 和 Apple、Mango。

<input type="text" id="value1"> // to output sum of values i.e., 50 
<input type="text" id="value2"> // to output comma separated data values Apple, Mango on select

在这里我可以进行第一个操作。但我不确定如何做第二个。我想要的是当我选中它的总和值并将其输出到第一个文本框时，当取消选中任何框时，它会扣除值（它已经像我能够做到的那样工作）并且第二个框应该输出值 Apple，分别选中两个框时的芒果。如果未选中任何框，则说带有数据值 Mango 的框，则文本框值将仅变为 Apple（甚至删除逗号）。这个怎么做？下面是我用于完成第一个操作的当前 jQuery 代码。第二个怎么做？我还应该在这段代码中添加什么？

$(document).ready(function(){
  $('input[type=checkbox]').change(function(){
    var total = 0;
    $('input:checkbox:checked').each(function(){
      total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
    });
    $("#costdisplay").html(total);
    $("input[name=amount]").val(total);
  });
});

【问题讨论】：

在循环中获取data 属性的内容（实际上应该命名为data-something，因为这是自定义数据属性的正确语法）并将它们放入一个数组中。 . 然后简单地 join 该数组之后。

标签： javascript php jquery html checkbox

【解决方案1】：

试试这个

$(document).ready(function(){
  $('input[type=checkbox]').change(function(){
    var total = 0;
    var txt = '';
    $('input:checkbox:checked').each(function(){
      total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
      txt += $(this).attr('data')+', ';
    });
    $("#costdisplay").html(total);
    $("input[name=amount]").val(total);
    $("#value2").val(txt.slice(0,-2));
  });
});

【讨论】：

工作完美.. 最后一件事.. 在第 2、3、4 个单词之前需要一个空格.. 表示目前它的Value1,Value2,Value3 和需要的Value1, Value2, Value3.. 可以吗？
在逗号后面加空格 txt += $(this).attr('data')+', ';并添加 -2 insted of -1 $("#value2").val(txt.slice(0,-2));
slice(0,-2) 如果只选择了一个值，则省略单词的最后一个字母..
是的..天堂般的完美..接受它..谢谢哥们:)

【解决方案2】：

检查以下代码是否适合您！

$(document).ready(function(){
  $('input[type=checkbox]').change(function(){
    var total = 0;
    var dataval = "";
    $('input:checkbox:checked').each(function(){
      var val = $(this).val();
      total += isNaN(parseFloat(val)) ? 0 : parseInt(val);
      dataval += $(this).attr('data') +", ";
    });
    $("#value1").val(total);
    $("#value2").val(dataval.slice(0,-2));
  });
});

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>


<input type="checkbox" value="20" data="Apple">
<input type="checkbox" value="30" data="Mango">


<input type="text" id="value1"> // to output sum of values i.e., 50 
<input type="text" id="value2">

【讨论】：

【解决方案3】：

您应该使用data-* 前缀的自定义属性来存储任意数据，可以使用$.fn.data(key). 获取这些数据

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
    var $elem = $('input:checkbox:checked'),
      $amount = $("input[name=amount]"),
      $costdisplay = $("#costdisplay"),
      dataValues = [],
      total = 0;
      
    if ($elem.length) {
      
      $('input:checkbox:checked').each(function() {
        total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
        dataValues.push($(this).data('value')); //Iterate and populate the array from custom attribute
      });

    }
    
    $amount.val(total);
    $costdisplay.val(dataValues.join(','));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="20" data-value="Apple">Apple<br/>
<input type="checkbox" value="30" data-value="Mango">Mango<br/>

<input type="text" name="amount"> <br/>
<input type="text" id="costdisplay"> <br/>

【讨论】：

【解决方案4】：

在计算总量的同时，还要使字符串具有逗号分隔的数据值。

使用下面的代码sn-p：

$(document).ready(function(){
   $('input[type=checkbox]').change(function(){
   var total = 0;
   var data = '';
   $('input:checkbox:checked').each(function(){
      total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
      if(data) {
          data += ','+ $(this).attr('data');
      } else {
          data += $(this).attr('data');
      }
   });
   $("#costdisplay").html(total);
   $("input[name=amount]").val(total);
   $("#value2").val(data);
 });
});

【讨论】：