javascript - Get dynamically value from checkbox jQuery - Stack Overflow

admin管理员组

文章数量:1405319

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=".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>

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

• javascript
• jquery

Share Improve this question Follow edited Oct 19, 2017 at 14:12 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Oct 19, 2017 at 14:01 OpsionalOpsional 54344 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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

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

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

 });

本文标签： javascriptGet dynamically value from checkbox jQueryStack Overflow