Question

我有一个3-4的复选框，当用户选中复选框时我想将复选框的值添加到数组中，如果他们取消选中我要从数组中删除项目的框，这就是什么我到目前为止：

$('ul.dropdown-menu input[type=checkbox]').each(function () {
    $(this).change(function () {

        if ($(this).attr("id") == 'price') {
            if (this.checked) {
                priceArray.push($(this).val());
            }
            else {
                priceArray = jQuery.grep(priceArray, function (value) {
                    return value != $(this).val();
                });
            }
        }
    });
});

将值添加到数组非常有效，但删除项会导致此错误：

Cannot read property 'toLowerCase' of undefined

在这一行：

return value != $(this).val();

Answer 1

替换

priceArray = jQuery.grep(priceArray, function (value) {
    return value != $(this).val();
});

通过

val = $(this).val();
priceArray = jQuery.grep(priceArray, function (value) {
    return value != val;
});

不要忘记你在回调函数中的范围。

Answer 2

您可以尝试使用filter代替$.grep：

var values = [];

$("input").on("change", function() 
{
  var $this = $(this);
  
  if ($this.is(":checked")) 
  {
    values.push($this.val());
  }
  else 
  {
    values = values.filter(x => x != $this.val());
  }
  
  console.log(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />

filter()是一个原生函数，我更喜欢使用内置函数而不是第三方IMO。另外，避免在循环中绑定事件，如下所示：

$('ul.dropdown-menu input[type=checkbox]').each(function () {
    $(this).change(function () {

使用此方法：

$('ul.dropdown-menu').on('change', 'input[type=checkbox]', function() { ...

即使动态添加复选框，也会有效。

Answer 3

你可以用功能风格非常干净地做到这一点

<div class="checkboxes">    
  <input type="checkbox" value="1" />
  <input type="checkbox" value="2" />
</div>

和

(function() {
    $(".checkboxes input[type=checkbox]").on("click", function() {
        var x = $(".checkboxes input[type=checkbox]:checked").map(function(a,b) {
        return parseFloat(b.value);
      }).toArray();
      console.log(x)
    });
})();

Answer 4

运行代码段并检查

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var priceArray=[];
  $(document).ready(function(){
  $('input[type=checkbox]').each(function () {
    $(this).change(function () {
            if (this.checked) {
                priceArray.push($(this).val());
               $("#displayarray").html("array=[" + priceArray+"]");
            }
            else {
               var index = priceArray.indexOf($(this).val());
               if (index > -1) {
                  priceArray.splice(index, 1);
                }
                $("#displayarray").html("array=[" + priceArray+"]");
            }
    });
});
  
  });
</script>
<input type="checkbox" value="box1"/>box1
<input type="checkbox" value="box2"/>box2
<input type="checkbox" value="box3"/>box3
<input type="checkbox" value="box4"/>box4
<br/>
<div id="displayarray"></div>

jquery从数组中添加/删除项目

4 个答案: