取消选中复选框时，从数组中删除元素

Question

I add an element to an array when the checkbox is checked and I need to remove it when it is unchecked. I use splice to remove an element. I just can't seem to call an event when it's unchecked. I tried using this:

if ($('input[name="'+category+'"]:checked'))
    item_id[category] = $(this).attr("id");
else 
    item_id.splice(category, 1);

It adds the needed element ok, when the checkbox is checked, but it doesn't seem to remove it when it's unchecked. Variable category is a loop variable and is correct.

If someone can work this out, it would be greatly appreciated.

Answer 1

jQuery selectors always return an object whether an element is matched or not.

What you've effectively got is:

if (new Object())
    item_id[category] = $(this).attr("id");
else 
    item_id.splice(category, 1);

Objects are always truthy (no matter if it's an empty object, or an object John Resig initialized), so this if statement will never execute the else .

What you're probably after is:

if ($('input[name="'+category+'"]:checked').length)
    item_id[category] = $(this).attr("id");
else 
    item_id.splice(category, 1);

Which checks the length property instead.

This still won't work however, as splice() will shift all elements in your array; making the category wrong.

If your binding the event on a number of checkbox elements, it will be unwise to use .bind() (and it's counterparts .click() ), as this method will bind an event for each checkbox. Instead, use .live() , or .delegate() ; this will bind one event to an ancestor of all checkbox elements, and listen for event (using JavaScripts event bubbling), which is much more efficient.

Taking both of these points into consideration, you might fancy something like this.

$(yourJquerySelector).live('change', function () {
    var category = '?' // (this.value ?)

    item_id[category] = this.checked ? this.id : undefined;
});

Answer 2

splice函数旨在返回删除的内容，因此请通过显示其返回值开始调试。

Answer 3

Change your if condition to:

$('input[name="'+category+'"]').is(':checked')

As mentioned by Matt, your current if condition is a selector that returns a list of jQuery elements. Testing the number of elements returned (using the length property) would also do the trick.

Answer 4

Not entirely sure what you are after to be honest, but here is my solution to this,hope it works for you in some way

Javascript Array - indexOf Method: http://www.tutorialspoint.com/javascript/array_indexof.htm

<script>

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

$(function() {

    var checkedItems = new Array();

    $(":checkbox").change(function () {
        if($(this).attr('checked'))
        {
        checkedItems.push($(this).attr("id"));
         }
        else
        {
        var index = checkedItems.indexOf($(this).attr("id"));
        checkedItems.splice(index,1);
        }
    });

});
</script>   

HTML

<input type="checkbox" id="c1" value="1">
<input type="checkbox" id="c2" value="2">
<input type="checkbox" id="c3" value="3">