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

 });