從checkbox jQuery中獲取動態值

Question

我需要幫助從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. 如果選中類別1，則獲取值（正確）。
2. 如果選中類別2，則獲取值（正確）。
3. 如果未選中類別1，則再次獲取值（錯誤，我不想要它）。
4. 如果未選中類別2，則再次獲取值（錯誤，我不想要它）。

我想這樣：

5. 如果未選中類別1，則從輸出數組中刪除該值。

6. 如果未選中類別2，則從輸出數組中刪除該值。

Answer 1

檢查是否選中了復選框，如果是，則將值添加到數組中，如果不是則刪除。

 $(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

您可以一次獲取所有已檢查值的數組：

$( 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

您不必聲明一個數組開始（無論如何都會污染您的命名空間）。 您可以簡單地選擇所有復選框，使用.filter()來保留那些被檢查的復選框，並使用.map()返回它們的值，所有這些都在onchange事件監聽器的回調中完成：

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

console.log(value_array);

注意：請記住在.map()末尾鏈接.get() ，因為它將返回一個jQuery對象/集合，您必須將其轉換為數組。

請參閱下面的概念驗證示例：

 $(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

首先，您應該了解“this”值是指擁有代碼的對象。 在你的情況下，“這”在

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

指的是“文檔”本身，而不是“.radio-group輸入”。 相反，您應該執行以下操作，以便“this”指向您的復選框。

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

 });