Get dynamically value from checkbox jQuery

Question

I need help with get value from checkbox with jQuery.

 $( document ).ready( function() { var value_array = []; $( document ).on( 'change', '.radio-group input', function(e) { var $this = $( this ), value = $this.val(); value_array.push( value ); console.log( $.unique( value_array ) ); $( '#out' ).html( $.unique( value_array ).join() ) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="radio-group"> <label> <input type="checkbox" name="cat_1" value="90" /> Category 1 </label> <label> <input type="checkbox" name="cat_2" value="43" /> Category 2 </label> </div> <div id="out"> </div> 

1. If category 1 checked, getting value (correct).
2. If category 2 checked, getting value (correct).
3. If category 1 un-checked, getting value again (false, i don't want it).
4. If category 2 un-checked, getting value again (false, i don't want it).

I want like this:

5. If category 1 un-checked, remove the value from output array.

6. If category 2 un-checked, remove the value from output array.

Answer 1

Check if checkbox is checked, add value into array if it is, remove if it's not.

 $(document).ready(function() { var value_array = []; $(document).on('change', '.radio-group input', function(e) { var $this = $(this), value = $this.val(); if ($this.prop('checked')) value_array.push(value); else value_array.splice(value_array.indexOf(value), 1); console.log($.unique(value_array)); $('#out').html($.unique(value_array).join()) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="radio-group"> <label> <input type="checkbox" name="cat_1" value="90" /> Category 1 </label> <label> <input type="checkbox" name="cat_2" value="43" /> Category 2 </label> </div> <div id="out"> </div> 

Answer 2

You can just fetch an array of all checked values at once:

$( document ).ready( function() {
  var value_array = [];

  $( document ).on( 'change', '.radio-group input', function(e) {
    value_array = $('.radio-group input:checked').map(function() {
                 return $(this).val();
              }).get();

    console.log( $.unique( value_array ) );
    $( '#out' ).html( $.unique( value_array ).join() )
  });
});

JSFiddle

Answer 3

You don't have to declare an array to begin with (which will pollute your namespace anyway). You can simply select for all the checkboxes, use .filter() to keep those that are checked, and the use .map() to return their values, all done within the callback of the onchange event listener:

// Get values of checked checkboxes
var value_array = $('.radio-group input').filter(':checked').map(function() {
  return this.value;
}).get();

console.log(value_array);

Note: Remember to chain .get() at the end of .map() , because it will return a jQuery object/collection and you have to convert it into an array.

See proof-of-concept example below:

 $(document).ready(function() { $(document).on('change', '.radio-group input', function(e) { var $this = $(this), value = $this.val(); // Get values of checked checkboxes var value_array = $('.radio-group input').filter(':checked').map(function() { return this.value; }).get(); console.log(value_array); $('#out').html(value_array.join()) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="radio-group"> <label> <input type="checkbox" name="cat_1" value="90" /> Category 1 </label> <label> <input type="checkbox" name="cat_2" value="43" /> Category 2 </label> </div> <div id="out"> </div> 

Answer 4

First, you should understand that the "this" value refers to the object that owns the code. In your case, the "this" in

     $( document ).on( 'change', '.radio-group input', function(e)

refers to the "document" itself and not the ".radio-group input". Instead you should do the following so that the "this" refers to your checkbox.

    var arr = [];
    $(".radio-group input").change(function(){

    var val = $(this).val();

    //push the value into the array if the checkbox is checked
   if($(this).prop("checked")==true)
   {
      arr.push(val);

   }

  //otherwise, remove the value from the array
   else{
  //fetch the index of the value in the array
   var index = arr.indexOf(val);

   //remove that value from the index
   arr.splice(index,1);
 }

 });