从阵列中删除未选中的复选框

Remove unchecked checkbox from array

本文关键字：复选框 删除 阵列      更新时间：2023-09-26

我有一堆复选框： 

<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 中。知道为什么它不是空的吗？谢谢！

尝试在循环之外重置列表产品的 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);
    });
});

除了导致脚本无法按预期工作外，$.each showtimesAsString设置效率低下。移动创建字符串的 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>

您可以将代码更改为如下所示的内容：

$('#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/

$('#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);
    });
});
您可以使用

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

$(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(', '));
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

相关文章：