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，则获取值（正确）。
如果检查了类别2，则获取值（正确）。
如果未选中类别1，则再次获取值（错误，我不想要它）。
如果未选中类别2，则再次获取值（错误，我不想要它）。

我想这样：

如果未选中类别1，请从输出数组中删除该值。
如果未选中类别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对象/集合，您必须将其转换为数组。

请参阅下面的概念验证示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

首先，您应该了解“this”值是指拥有代码的对象。在你的情况下，

中的“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);
 }

 });

从复选框jQuery

4 个答案: