Javascript对indexOf采取.innerHTML进行检查

Ryan Salmons 发表于 Dev

瑞安·萨蒙斯（Ryan Salmons）

我有一个名为“选项”的变量。每当用户选中其中一个复选框时，我需要使用“选项”为每个选中的复选框填充.innerHTML字符串。例如，当Instagram的和Google+检查， '选项' 将Instagram的=，的Google+。

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

<div class="card-charge-info">
    Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
</div>

javascript：

var price = 0,
    additional = 0,
    options = "",
    inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total'),
    total2 = document.getElementById('payment-rebill');

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.parentNode.className.split(" ").indexOf("checked") > -1 ? 1 : -1);
            additional += add
            total.innerHTML = price + additional;

        if (price == select.options[2].value) {
            total2.innerHTML = 0;
        }
        else {
            total2.innerHTML = price + additional;
        }
    }
}

JSFiddle：http : //jsfiddle.net/rynslmns/LQpHQ/

布拉德·克里斯蒂

我建议每次他们更改检查状态时都将这些信息制成表格。您现在正在做的事情有问题；当前，您从0开始，但是通过选中和取消选中几个选项，最终很快处于负数（总价）。

另外，选项（作为字符串）将很难跟上。我可能会创建一个可以添加/删除的数组（但是如果您将其制成表格，则不必担心）。

例如：

var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total'),
    total2 = document.getElementById('payment-rebill');

// Perform the summing
// Though I'm not sure where total is coming from, but you can work that out.
// And for now I have it alerting the options, but you can do whatever you'd like with that.
function sumItUp(){
    var ttl = 0, additional = 0, options = [];
    for (var i = 0; i < inputs.length; i++){
        if (inputs[i].checked){
            options.push(inputs[i].parentNode.textContent.trim());
            var n = new Number(inputs[i].value);
            if (!isNaN(n)) additional += n;
        }
    }
    total.innerHTML = ttl.toFixed(2);
    total2.innerHTML = (ttl + additional).toFixed(2);
    alert('Options:\n\n' + options.join(', '));
}

// bind events to sum it on every change
for (var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener('change', sumItUp);
}

// Polyfill for trim()
if (!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/^\s+|\s+$/g,'');
    };
}