CODEWITHSUNDEEP
javascriptjqueryarrayscheckbox
donk
donk

Reputation: 1570

remove element from array when checkbox unchecked

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.

Upvotes: 0

Views: 6751

Answers (4)

manraj82
manraj82

Reputation: 6295

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">

Upvotes: 1

Matt
Matt

Reputation: 75317

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;
});

Upvotes: 2

RabidFire
RabidFire

Reputation: 6330

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.

Upvotes: 1

crdx
crdx

Reputation: 1432

The splice function is meant to return what's removed, so start debugging by displaying its return value.

Upvotes: 1

Related Questions