从许多复选框组向数组添加和删除复选框值

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" /> 

Answer 1

 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> 

Answer 2

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);
});

Answer 3

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" /> 

Answer 4

 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