未选中复选框时如何从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);
                    }
                }
            }
    }