使用带有数组的数据属性进行复选框输入[关闭]答案

【问题标题】：Using a data-attribute with an array for checkbox inputs [closed]使用带有数组的数据属性进行复选框输入[关闭]
【发布时间】：2017-06-25 03:23:51
【问题描述】：

如果checkbox 是selected，我有多个checkboxs，我正在尝试将数据写入#template-selection-review。当它被选中时，我希望使用来自data-template 的数据并将其放入array，这样如果选择了多个选项，它将显示出来。

我做错了什么？

$('.tp-template-check').on('change', function() {
  var templateSelection = {};
  
  $('.tp-template-check:checked').each(function() {
    templateSelection[$(this).data('template')] = $(this).val();
    $('#template-selection-review').html(templateSelection);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="tp-template-check" data-template="Winter">
<input type="checkbox" class="tp-template-check" data-template="Spring">
<input type="checkbox" class="tp-template-check" data-template="Summer">
<input type="checkbox" class="tp-template-check" data-template="Fall">
<div id="template-selection-review"></div>

【问题讨论】：

标签： javascript jquery arrays checkbox

【解决方案1】：

如果你想使用object，就像你显示的那样，你必须将value设置为复选框，然后将结果对象templateSelection转换为字符串，然后再将其打印到#template-selection-review：

$('#template-selection-review').html(JSON.stringify(templateSelection));

否则你可以使用数组代替，那么你不需要任何值：

templateSelection.push($(this).data('template'));

希望这会有所帮助。

使用对象的片段：

$('.tp-template-check').on('change', function() {
  var templateSelection = {};
  
  $('.tp-template-check:checked').each(function() {
    templateSelection[$(this).data('template')] = $(this).val();
  });

  $('#template-selection-review').html(JSON.stringify(templateSelection));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="tp-template-check" data-template="Winter" value='checkbox1'>
<input type="checkbox" class="tp-template-check" data-template="Spring" value='checkbox2'>
<input type="checkbox" class="tp-template-check" data-template="Summer" value='checkbox3'>
<input type="checkbox" class="tp-template-check" data-template="Fall">

<div id="template-selection-review"></div>

使用数组的片段：

$('.tp-template-check').on('change', function() {
  var templateSelection = [];
  
  $('.tp-template-check:checked').each(function() {
    templateSelection.push($(this).data('template'));
  });

  $('#template-selection-review').html(templateSelection.join('<br>'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="tp-template-check" data-template="Winter" value='checkbox1'>
<input type="checkbox" class="tp-template-check" data-template="Spring" value='checkbox2'>
<input type="checkbox" class="tp-template-check" data-template="Summer" value='checkbox3'>
<input type="checkbox" class="tp-template-check" data-template="Fall">

<div id="template-selection-review"></div>

【讨论】：

我怎么能只说冬天、秋天或任何选择？
那么你可以使用数组，检查我的更新。
这在您的 sn-p 中完美运行，但由于某种原因它不适用于我的实际页面。
好的，检查您的浏览器控制台，是否有任何错误/警告。
没有错误信息。什么都没有出现。这是我的真实代码（精简）。你看到我可以做些什么来阻止它吗？ jsfiddle.net/9qh711za

【解决方案2】：

首先，选中复选框。接下来map每个条目只返回数据集值。最后join结果：

$('.tp-template-check').on('change', function() {
  $('#template-selection-review').html(
    Array.from($('.tp-template-check:checked'))
    .map(a => a.dataset['template'])
    .join(', ')
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="tp-template-check" data-template="Winter">
<input type="checkbox" class="tp-template-check" data-template="Spring">
<input type="checkbox" class="tp-template-check" data-template="Summer">
<input type="checkbox" class="tp-template-check" data-template="Fall">
<div id="template-selection-review"></div>

【讨论】：

【解决方案3】：

$('.tp-template-check').on('change', function() {
  var templateSelection = []; // the selected items array

  $('.tp-template-check:checked').each(function() {
    templateSelection.push($(this).data('template')); // accumulate the selected items
  });
  
  $('#template-selection-review').html("Selected Items:<br>" + templateSelection.join('<br>')); // show result after the accumulation is done
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="tp-template-check" data-template="Winter">
<input type="checkbox" class="tp-template-check" data-template="Spring">
<input type="checkbox" class="tp-template-check" data-template="Summer">
<input type="checkbox" class="tp-template-check" data-template="Fall">
<div id="template-selection-review"></div>

【讨论】：

【解决方案4】：

你能试试下面的解决方案吗

我理解问题的方式是，您是否试图显示“冬天，秋天”。如果我错了，请提供您需要的示例输出，以便重试。

$('.tp-template-check').on('change', function() {
    var templateSelection = [];
    $('.tp-template-check:checked').each(function() {
        templateSelection.push($(this).data('template'));
    });

    $('#template-selection-review').html(templateSelection.join());
})

【讨论】：