将数据属性与数组一起用于复选框输入

Question

如果checkbox为#template-selection-review，我有多个checkbox我试图在selected中写入数据。选中后，我希望使用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>

Answer 1

如果您要在显示的代码段中使用object，则必须将value设置为复选框，然后将结果对象templateSelection转换为字符串，然后再将其打印到{ {1}}：

#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>'));
})

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$('.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
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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());
})