How to remove content from Javascript array when checkbox is unchecked

Question

I have a form that lets users select checkboxes. I am able to create an array that takes the textContent of the checkbox. It works whenever they are selected, however, I would like to have the text removed from the array whenever a box is unchecked. Currently, when a box is unchecked it adds the box that is unchecked to the array. I realize that is because anytime the on change function happens (i.e. checked/unchecked) my code will populate the array. I am just looking for something that will remove the string whenever it is unchecked. Any suggestions?

html:

<section id="extra-features">

                    <div class="span3">
                    <label class="checkbox" for="Checkbox1">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Instagram
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Google+
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> LinkedIn
                    </label>
                    </div>
                    <div class="span3">
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Pinterest
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> FourSquare
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Advertising
                    </label>
                    </div>
                </section>

Javascript:

 var options = [];
 var inputs = document.getElementsByClassName('sum'),

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
            if(this.checked){
        options.push(this.parentNode.textContent.trim());
           }
    }

JSFIDDLE: http://jsfiddle.net/rynslmns/4dFGd/

I'm confused as to what you're looking to do. You want the checkbox to be removed once it's unchecked or when it is checked? Or do you only want it removed from the array? — badAdviceGuy
– badAdviceGuy, Commented Feb 5, 2014 at 22:25
i want it to be removed from the array. i.e. when instagram is checked, options would be ["Instagram"]. Whenever instagram gets unchecked, I need options to be []; — Ryan Salmons
– Ryan Salmons, Commented Feb 5, 2014 at 22:27

a-d · Accepted Answer · 2014-02-06 18:42:52Z

3

Here is how I would do it with a jsfiddle

Make `options` an object

var options = {};
var inputs = document.getElementsByClassName('sum');

function getOptions() {
    var optionsArray = [];
    for (var key in options) {
        optionsArray.push(options[key]);
    }
    return optionsArray;
}

for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
            if (this.checked) {
                options[this.id] = this.parentNode.textContent.trim();
            } else {
                delete options[this.id];
            }
            console.log(getOptions());
        }
}

Add an id to your checkboxes

<section id="extra-features">

                        <div class="span3">
                        <label class="checkbox" for="Checkbox1">
                            <input type="checkbox" id="Checkbox1" class="sum" value="50" data-toggle="checkbox"> Instagram
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" id="Checkbox2" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" id="Checkbox3" class="sum" value="50" data-toggle="checkbox"> Google+
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" id="Checkbox4" class="sum" value="50" data-toggle="checkbox"> LinkedIn
                        </label>
                        </div>
                        <div class="span3">
                        <label class="checkbox">
                            <input type="checkbox" id="Checkbox5" class="sum" value="50" data-toggle="checkbox"> Pinterest
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" class="sum" value="50" id="Checkbox6" data-toggle="checkbox"> FourSquare
                        </label>
                        <label class="checkbox">
                            <input id="Checkbox6" type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" class="sum" value="50" id="Checkbox7" data-toggle="checkbox"> Advertising
                        </label>
                        </div>
                    </section>

edited Feb 6, 2014 at 18:42

answered Feb 5, 2014 at 22:28

a-d

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Salmons Over a year ago

I am trying to call optionsArray in a console.log(optionsArray[1]), however it is saying that optionsArray is not defined. Can you assist me with this?

Ryan Salmons Over a year ago

Basically, I plan on printing out optionsArray[i] into an email. I want it to show up as Instagram, Google+ as opposed to ["Instagram", "Google+"]

a-d Over a year ago

Oh, that's because optionsArray is in the function getOptions scope. Just assign the result of getOptions to a variable, then you'll be able to access it.

james emanon · Accepted Answer · 2014-02-05 22:56:43Z

0

using your existing code, ala Array [].

http://jsfiddle.net/4dFGd/4/

var options = [];
var inputs = document.getElementsByClassName('sum');

    for (var i=0; i < inputs.length; i++) {
            inputs[i].onchange = function() {
                var txt = this.parentNode.textContent.trim();
                options.push(txt);
                if(this.checked === false){
                    while (options.indexOf(txt) !== -1) {
                      options.splice(options.indexOf(txt), 1);
                    }
                }
            }
    }

edited Feb 5, 2014 at 22:56

answered Feb 5, 2014 at 22:48

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

Collectives™ on Stack Overflow

How to remove content from Javascript array when checkbox is unchecked

2 Answers 2

Make `options` an object

Add an id to your checkboxes

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Make options an object

Add an id to your checkboxes

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Make `options` an object