使用 jQuery 基于复选框选中和取消选中值从数组推送和弹出数据

Question

 var listvalues = [] $('.check').on('change', function() { var val = this.checked? this.value: ''; listvalues.push(val) $('#show').html(listvalues); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script> <input type="checkbox" class="check" value="1" />1 <input type="checkbox" class="check" value="2" />2 <input type="checkbox" class="check" value="3" />3 <input type="checkbox" class="check" value="4" />4 <div id="show"> </div>

我有一个代码应该基于复选框选中和取消选中来推送和弹出复选框值，例如，如果我选中并选中复选框，它应该在 div 中显示值，如果我取消选中复选框，则值应该从 div 中消失，它不应该允许任何人对 append 重复数据。

但是我所做的即使它是重复的，它也会附加数据。 谁可以帮我这个事？

我想为每个复选框创建单独的 div

Answer 1

您可以使用listvalues = $('.check:checked').toArray().map(x => x.value);获取所有已检查的值，而不是从数组中push和pop值并显示它。

$('.check:checked')只会返回被checked的.check 。 然后.toArray()将jquery object 转换为array并使用.map(x => x.value)仅从检查的元素中获取值。

 var listvalues = [] $('.check').on('change', function() { listvalues = $('.check:checked').toArray().map(x => x.value).join(', '); $('#show').html(listvalues); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script> <input type="checkbox" class="check" value="1" />1 <input type="checkbox" class="check" value="2" />2 <input type="checkbox" class="check" value="3" />3 <input type="checkbox" class="check" value="4" />4 <div id="show"> </div>

Answer 2

要删除，您可以使用filter排除未选中的项目。 我不确定你想用不同的 div 实现什么，请解释一下。

 var listvalues = [] $('.check').on('change', function() { if(this.checked){ listvalues.push(this.value); } else { listvalues = listvalues.filter(item => item.= this;value). } $('#show').html(listvalues;sort()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script> <input type="checkbox" class="check" value="1" />1 <input type="checkbox" class="check" value="2" />2 <input type="checkbox" class="check" value="3" />3 <input type="checkbox" class="check" value="4" />4 <div id="show"> </div>