Question

我有一堆复选框：

<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>

这样的JS代码，它生成所选输入的所有名称。

$('#other-products').on('change', function() {
    var selectedProducts = [];
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = selectedProducts.join(', ');
      $('.list-products').html(showtimesAsString);
    });
});

问题是，当我选择几个复选框，然后取消选中所有复选框时，最后一个未选中的复选框标题显示在.list-products中。任何想法为什么它不是空的？谢谢！

Answer 1

尝试重置循环外的列表产品的html内容。

https://jsfiddle.net/99x50s2s/188/

 $('#other-products').on('change', function() {
    var selectedProducts = [];
    var listProductsCtrl = $('.list-products');
    listProductsCtrl.html(''); //reset the values here
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = selectedProducts.join(', ');
      listProductsCtrl.html(showtimesAsString);
    });
});

Answer 2

除了导致您的脚本无法正常工作外，还要将showtimesAsString中的$.each设置为低效。移动创建字符串的2行，并将.html()设置在$.each()之外。

$('#other-products').on('change', function() {
  var selectedProducts = [];

  $('#other-products input[type="checkbox"]:checked').each(function() {
    selectedProducts.push($(this).attr('name'));

  });

  var showtimesAsString = selectedProducts.join(', ');
  $('.list-products').html(showtimesAsString);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>

Answer 3

您可以将代码更改为以下内容：

$('#other-products').on('change', function() {
    var selectedProducts = $('#other-products input[type="checkbox"]:checked');
    var showtimesAsString = "";

    selectedProducts.each(function() {
       showtimesAsString += $(this).attr("name") + ",";
    });

    $('.list-products').html(showtimesAsString);
});

https://jsfiddle.net/5bu0sqjf/

Answer 4

$('#other-products').on('change', function() {
    var selectedProducts = [];
    $('.list-products').html('');
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = selectedProducts.join(', ');
      $('.list-products').html(showtimesAsString);
    });
});

Answer 5

您可以使用jQuery的map()函数来真正简化代码，避免手动重置数组和输出字符串。

＆＃13;

...
version :nav_thumb, if: :is_avatar? do
  process :resize_to_fit => [50, 50]
end

protected
  def is_avatar?(picture)
    mounted_as.eql?(:avatar)
  end

＆＃13;

$(function() {
  $('#other-products').on('change', function() {
    var names = $('#other-products input[type="checkbox"]:checked').map(function() {
      return $(this).attr('name');
    }).get();
    $('.list-products').html(names.join(', '));
  });
})

＆＃13;

从数组中删除未选中的复选框

5 个答案: