如何仅将新选中的复选框推送到数组

Question

我正在尝试构建能够识别何时选中新复选框的系统，一旦选中该复选框，用户将不得不选择以下选项之一：left、right、all。

一旦选择了三个中的一个，选中的复选框将被推送到它们的特定数组中。 (all[], right[], left[])

问题：

假设我选中了 1 号复选框，然后单击 all。

Debugging:
all["1"]

然后我选中第 3 个复选框，然后单击 left。

我会得到如下调试：

Debugging:
all["1"]
left["1", "3"]

想要的结果：

all["1"]
left["3"]

我希望 left[] 数组只检查 new 复选框，但不取消选中复选框。

Codepen

$(document).ready(function () {

    //Adding each checked checkbox to array
    let checked = [], all = [], left = [], right = [];
    $box = $('.ppom-check-input');
    $box.on('change', function() {
        checked = $box.filter(':checked').map((i,c) => c.value).get();
        $('#choose').addClass('active');
        console.log( checked );
    });
    
    //Push the value to array
    $('.all,.left,.right').on('click', function() {
        if( $(this).is('.all') ) {
            all = [...new Set( all.concat(checked) )];
            $('#choose').removeClass('active');
        } else if( $(this).is('.left') ) {
            left = [...new Set( left.concat(checked) )];
            $('#choose').removeClass('active');
        } else if( $(this).is('.right') ){
            right = [...new Set( right.concat(checked) )];
            $('#choose').removeClass('active');
        }
        console.log( 'all',all, 'left', left, 'right', right );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="ppom-check-input" />
1
<br/>
<input type="checkbox" value="2" class="ppom-check-input" />
2
<br/>
<input type="checkbox" value="3" class="ppom-check-input" />
3
<br/>
<input type="checkbox" value="4" class="ppom-check-input" />
4
<br/>
<input type="checkbox" value="5" class="ppom-check-input" />
5
<br/>


<div id="choose">
    <a href="javascript:void(0)" class="left">left</a>
    <a href="javascript:void(0)" class="right">right</a>
    <a href="javascript:void(0)" class="all">all</a>
</div>

我怎样才能只推送一个数组新值（不是所有选中的复选框）？

Answer 1

上面的一种方法是在使用addClass("selected_new")检查复选框时给复选框提供一些class，然后仅在单击任何a标签时删除相同的复选框，然后只有新选择的复选框才会添加到数组中。

演示代码：

$(document).ready(function() {

  //Adding each checked checkbox to array
  let checked = [],
    all = [],
    left = [],
    right = [];
  $box = $('.ppom-check-input');
  $box.on('change', function() {
    //if checked then only
    if ($(this).is(":checked")) {
      //added new class
      $(this).addClass("selected_new")
      //or
      //$(this).attr("data-selected", "selected_new")
    }
    //or [data-selected=selected_new]:checked
    checked = $box.filter('.selected_new:checked').map((i, c) => c.value).get();
    $('#choose').addClass('active');

  });
  $('.all,.left,.right').on('click', function() {
    console.clear()
    //remove class once any link is clicked
    $("input[type=checkbox]").removeClass("selected_new")
    //or
    //$("input[type=checkbox]").attr("data-selected", "")
    if ($(this).is('.all')) {
      all = [...new Set(all.concat(checked))];
      $('#choose').removeClass('active');
    } else if ($(this).is('.left')) {
      left = [...new Set(left.concat(checked))];
      $('#choose').removeClass('active');
    } else if ($(this).is('.right')) {
      right = [...new Set(right.concat(checked))];
      $('#choose').removeClass('active');
    }
    console.log('all', all, 'left', left, 'right', right);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="ppom-check-input" /> 1
<br/>
<input type="checkbox" value="2" class="ppom-check-input" /> 2
<br/>
<input type="checkbox" value="3" class="ppom-check-input" /> 3
<br/>
<input type="checkbox" value="4" class="ppom-check-input" /> 4
<br/>
<input type="checkbox" value="5" class="ppom-check-input" /> 5
<br/>


<div id="choose">
  <a href="javascript:void(0)" class="left">left</a>
  <a href="javascript:void(0)" class="right">right</a>
  <a href="javascript:void(0)" class="all">all</a>
</div>