如何用复选框jQuery替换数组中的值

Question

我正在尝试使用 jQuery 排列一个复选框数组。我已经设法将值按顺序添加到数组中并删除正确的值，但是对于我的一生，我无法让它用新选择的值替换删除的值。目前它只是将新值添加到数组的末尾。

到目前为止，这是我的代码：

var array = [];
        $('input[type="checkbox"]').click(function () {
            if ($(this).attr('checked')) {
                // Add the new element if checked:
                array.push($(this).attr('value'));
                $('#ff_elem512').val(array);
            }
            else {
                // Remove the element if unchecked:
                for (var i = 0; i < array.length; i++) {
                    if (array[i] == $(this).attr('value')) {
                        array.splice(i, 1);
                        $('#ff_elem512').val(array);
                    }
                }
            }

            console.log(array);
        });

提前致谢

Answer 1

使用 Jquery 是函数而不是像下面这样的 attr

var array = [];
    $('input[type="checkbox"]').click(function () {
        if ($(this).is('checked')) {
            // Add the new element if checked:
            array.push($(this).attr('value'));
            $('#ff_elem512').val(array);
        }
        else {
            // Remove the element if unchecked:
            for (var i = 0; i < array.length; i++) {
                if (array[i] == $(this).attr('value')) {
                    array.splice(i, 1);
                    $('#ff_elem512').val(array);
                }
            }
        }

        console.log(array);
    });

Answer 2

var array = [];
$('input[type="checkbox"]').change(function() {
      if ($(this).prop('checked')) {
        // Add the new element if checked:
        if (array.indexOf($(this).val()) < 0) {
            array.push($(this).val());
          } 
        } else {
          // Remove the element if unchecked:
          if (array.indexOf($(this).val()) >= 0) {
              array.splice(array.indexOf($(this).val()), 1);
            }
        }
        $('#ff_elem512').val(array.join(", "));
        console.log(array);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />One
<input type="checkbox" value="2" />Two
<input type="checkbox" value="3" />Three
<input type="checkbox" value="4" />Four
<input type="checkbox" value="5" />Five
<br />
<input type="text" id="ff_elem512" />

Answer 3

当您单击某个复选框时，您始终可以设置您的数组，如下所示：

$('input[type="checkbox"]').click(function () {
  array = [];
  $("input[type=checkbox]:checked").each( function () {
    array.push($(this).val());
  });
  console.log(array);
});

这是一个小提琴：https://jsfiddle.net/9ssyxvv2/

更新：如果您想保留点击顺序，请改用：

 $('input[type="checkbox"]').click(function () {
    var elem=$(this);
      if (this.checked) {
        array.push($(this).val())
    } else {
        array = array.filter(function(x){
            return x != $(elem).val() });
    }
    console.log(array);
});