Push and pop data from array based on checkbox check and uncheck value using jQuery

Question

var listvalues = []
$('.check').on('change', function() {
  var val = this.checked ? this.value : '';
  listvalues.push(val)
  $('#show').html(listvalues);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>

I have a code which should push and pop checkbox value based on checkbox check and uncheck, for example if I check and checkbox it should show the value in a div and if I unselect the checkbox the value should disappear from div, and it should not allow anyone to append duplicate data.

But what I did appends even if it is duplicate it appends the data. Can anyone help me on this?

and i wanted to create separate div for each checkbox

Karan · Accepted Answer · 2021-04-07 12:59:56Z

3

Instead of push & pop value from array, you can get all checked values with listvalues = $('.check:checked').toArray().map(x => x.value); and display it.

$('.check:checked') will only return .check which are checked. Then .toArray() will convert jquery object into array & get use .map(x => x.value) to fetch only value from checked elements.

var listvalues = []
$('.check').on('change', function() {
  listvalues = $('.check:checked').toArray().map(x => x.value).join(', ');
  $('#show').html(listvalues);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>

edited Apr 7, 2021 at 12:59

answered Apr 7, 2021 at 12:25

Karan

12.7k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aurora Eugene Over a year ago

yeah this works fine , but is there any way i can create seperate div for each checkbox selected , because here my data gets appended like without a space

Karan Over a year ago

You can use .join(', '); to append values form array with separator as , .

Dumisani · Accepted Answer · 2021-04-07 12:47:37Z

0

To remove you can use filter to exclude the unchecked item. I'm not sure what you want to achieve with different divs, please explain.

var listvalues = []
$('.check').on('change', function() {
    if(this.checked){
        listvalues.push(this.value);
    }
    else {
        listvalues = listvalues.filter(item => item != this.value);
    }

    $('#show').html(listvalues.sort());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>

answered Apr 7, 2021 at 12:47

Dumisani

3,0461 gold badge31 silver badges40 bronze badges

3 Comments

Aurora Eugene Over a year ago

but is there any way i can create seperate div for each checkbox selected , because here my data gets appended like without a space

Dumisani Over a year ago

@AuroraEugene That's the part I want to understand. Separate them how? More space between the checkboxes or spaces between the output data? Maybe create a dummy output you are looking for.

Aurora Eugene Over a year ago

like there should be space between data

Collectives™ on Stack Overflow

Push and pop data from array based on checkbox check and uncheck value using jQuery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related