如何在取消选中复选框时从Javascript数组中删除内容

Question

我有一个允许用户选中复选框的表单。我能够创建一个采用复选框textContent的数组。只要选中它们，它就可以工作，但是，每当取消选中一个框时，我希望从数组中删除文本。目前，当未选中某个框时，它会将未选中的框添加到数组中。我意识到这是因为任何时候更改功能发生（即检查/取消选中），我的代码将填充数组。我只是在寻找一些在取消选中时会删除字符串的东西。有什么建议吗？

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/

Answer 1

<强> Here is how I would do it with a jsfiddle

使options成为对象

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

在您的复选框中添加ID

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

Answer 2

使用您现有的代码，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);
                    }
                }
            }
    }