CODEWITHSUNDEEP
javascripthtmljquery
Yotam
Yotam

Reputation: 57

How to push to array only new checked checkboxes

I'm trying to build system that will recognize when new checkbox is checked, once the checkbox is checked, the user will have to choose one of the options: left, right, all.

Once one of the three is chosen, the checked checkboxes will be pushed into their specific array. (all[], right[], left[])

The problem:

Lets assume I check checkbox number 1, and click all.

Debugging:
all["1"]

then I check checkbox number 3, and click left.

I will get the following debugging:

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

Desired result:

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

I want left[] array to get only the new checkbox checking, but without unchecking the checkboxes.

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>

How can I push to an array new values only (not all checked checkboxes)?

Upvotes: 1

Views: 130

Answers (1)

Swati
Swati

Reputation: 28522

One way to do above is giving some class to checkboxes whenever its checked using addClass("selected_new") then remove same only when any of a tag is clicked then only checkboxes which is newly selected will be added in array.

Demo Code :

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

Upvotes: 2

Related Questions