Question

我正在一个项目上，我在其中生成一些复选框，其值基于PHP变量，如下所示：

<input type="checkbox" value="<?php echo $example; ?>">

然后，我希望能够获取单击的输入的值并将其添加到JS数组中，以便我可以从任何选中的复选框发布所有值。

将值添加到我的JS数组中没问题，但是当我尝试从数组中删除它们时，我遇到了麻烦。如果数组中有单个元素，则将其删除，如果多于一个，则我的代码似乎仅删除最近添加的元素。

我认为问题出在value_array.splice(index, 1);行。

$(document).on('click', '.example-input', function() {

    input = $(this).find('input');

    if(example_condition == true) {
        $(input).prop( 'checked', true );
        value = $(input).val();
        value_array.push(value);
        index = value_array.indexOf(value);
        is_checked = true;
    } else {
        $(input).prop('checked', false);
        is_checked = false;
    }

    if(is_checked == false) {
        if(index !== -1) {
            value_array.splice(index, 1);
        }
    }

    // Post JS array
});

希望有人能在这里指出正确的方向。

我还尝试实现此处给出的答案：How do I remove a particular element from an array in JavaScript?，但是当数组中有多个元素时，它似乎不起作用。

谢谢。

Answer 1

这是我要解决的方法：创建一个遍历复选框并添加到数组的函数，在页面加载时以及发生任何更改时调用它

var value_array;
$(document).ready(function() {
   updateValueArray();
   $(document).on('change', '.myCheck', function() {
      updateValueArray();
      console.log(value_array);
  });
});


function updateValueArray() {
  value_array = [];
  $('.myCheck:checked').each(function() {
      value_array.push($(this).attr("value"));
  });
}

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

从Javascript数组中删除动态添加的变量

1 个答案: