Adding and removing checkbox values to an array from many groups of checkboxes

Question

I am working on the below code. How can I add and remove value from checkbox groups into an array?

Apparently I am able to add the values on checking the checkbox but my attempts to remove same value on un-checking the checkbox didn't work!

 
 let opts = [];
 $('input:checkbox[name=a]').on('change', function(){
  if($(this).is(':checked')){
       let val = $(this).data('shape');
        opts.push(val);
        console.log(opts);
       }
       else{
                let val = $(this).data('shape');
       opts.filter(a => a !== val);
       console.log(opts);
       }
  
});

 $('input:checkbox[name=b]').on('change', function(){
  if($(this).is(':checked')){
       let val = $(this).data('shape');
        opts.push(val);
        console.log(opts);
       }
       else{
         let val = $(this).data('shape');
       opts.filter(a => a !== val);
       console.log(opts);
       }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2"  />
<input type="checkbox" name="a" data-shape="scb3"  />
<input type="checkbox" name="a" data-shape="scb4" />


<input type="checkbox" name="b" data-shape="mcb1"  />
<input type="checkbox" name="b" data-shape="mcb2"  />
<input type="checkbox" name="b" data-shape="mcb3"  />
<input type="checkbox" name="b" data-shape="mcb4"  />

shivani · Accepted Answer · 2019-04-12 08:13:50Z

let opts = [];
 $('input:checkbox[name=a],[name=b]').change(function(){

  let val = $(this).data('shape');
  
  if($(this).is(':checked'))
  {      
        opts.push(val);
        console.log(opts);
       }
       else
       {         
         opts.splice( $.inArray($(this).data('shape'), opts), 1 );
         console.log(opts);
       }  
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" > First </input><br>
<input type="checkbox" name="a" data-shape="scb2"  > Second </input><br>
<input type="checkbox" name="a" data-shape="scb3"  > Three</input><br>
<input type="checkbox" name="a" data-shape="scb4" > Four</input><br>
<br>

<input type="checkbox" name="b" data-shape="mcb1"  >Five</input><br>
<input type="checkbox" name="b" data-shape="mcb2"  >Six</input><br>
<input type="checkbox" name="b" data-shape="mcb3"  >Seven</input><br>
<input type="checkbox" name="b" data-shape="mcb4"  >Eight</input><br>

Carsten Løvbo Andersen · Accepted Answer · 2019-04-12 07:03:54Z

If you want opts.filter(a => a !== val); to work you have to assign the new value again like: opts = opts.filter(a => a !== val);

You can also use opts.splice( $.inArray(val, opts), 1 ); It will remove the selected val from your array

Note: you can improve your function by allowing multiple select, $('input:checkbox[name=a],input:checkbox[name=b]')

Demo

let opts = [];
$('input:checkbox[name=a],input:checkbox[name=b]').on('change', function() {
  if ($(this).is(':checked')) {
    let val = $(this).data('shape');
    opts.push(val);
    console.log(opts);
  } else {
    let val = $(this).data('shape');
    opts.splice( $.inArray(val, opts), 1 )
    console.log(opts);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2" />
<input type="checkbox" name="a" data-shape="scb3" />
<input type="checkbox" name="a" data-shape="scb4" />


<input type="checkbox" name="b" data-shape="mcb1" />
<input type="checkbox" name="b" data-shape="mcb2" />
<input type="checkbox" name="b" data-shape="mcb3" />
<input type="checkbox" name="b" data-shape="mcb4" />

Here is a updated version of your code:

$('input:checkbox[name=a],input:checkbox[name=b]').on('change', function() {
  let val = $(this).data('shape');
  if ($(this).is(':checked')) {
    opts.push(val);
  } else {
    opts.splice( $.inArray(val, opts), 1 )
  }
  console.log(opts);
});

Carsten Løvbo Andersen · Accepted Answer · 2019-04-12 07:02:35Z

let opts = [];
$('input:checkbox[name=a]').on('change', function() {
  if ($(this).is(':checked')) {
    let val = $(this).data('shape');
    opts.push(val);
    console.log(opts);
  } else {
    let val = $(this).data('shape');
    opts = opts.filter(a => a !== val);
    console.log(opts);
  }

});

$('input:checkbox[name=b]').on('change', function() {
  if ($(this).is(':checked')) {
    let val = $(this).data('shape');
    opts.push(val);
    console.log(opts);
  } else {
    let val = $(this).data('shape');
    opts = opts.filter(a => a !== val);
    console.log(opts);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2" />
<input type="checkbox" name="a" data-shape="scb3" />
<input type="checkbox" name="a" data-shape="scb4" />


<input type="checkbox" name="b" data-shape="mcb1" />
<input type="checkbox" name="b" data-shape="mcb2" />
<input type="checkbox" name="b" data-shape="mcb3" />
<input type="checkbox" name="b" data-shape="mcb4" />

array's filter method return a new array, you should assign to 'opts value' that it will work well

Carsten Løvbo Andersen · Accepted Answer · 2019-04-12 07:02:52Z

You could use filter to remove unchecked data,hope this helps

let opts = [];
$('input[type="checkbox"]').on('change', function() {
  let val = $(this).data('shape');
  if ($(this).is(':checked')) {
    opts.push(val);
    console.log(opts);
  } else {
    opts = opts.filter(function(elem) {
      return elem != val;
    });
    console.log(opts);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2" />
<input type="checkbox" name="a" data-shape="scb3" />
<input type="checkbox" name="a" data-shape="scb4" />
<input type="checkbox" name="b" data-shape="mcb1" />
<input type="checkbox" name="b" data-shape="mcb2" />
<input type="checkbox" name="b" data-shape="mcb3" />
<input type="checkbox" name="b" data-shape="mcb4" />

Collectives™ on Stack Overflow

Adding and removing checkbox values to an array from many groups of checkboxes

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related