如何僅將新選中的復選框推送到數組

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[]數組只檢查新的復選框，但不取消選中復選框。

密碼筆

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