Question

我有一个名为'options'的变量。每当用户选中其中一个复选框时，我需要'options'来为每个选中的复选框填充带有.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/

Answer 1

我建议每次更改检查状态时将信息列表。你现在在做什么是有问题的;目前你从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,'');
    };
}

jsFiddle

Answer 2

您将无法使用.innerHTML获取复选框的文本，因为它不包含任何文本。您需要使用.nextSibling代替。这样的事情应该有效：

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 text = this.nextSibling.nodeValue;
        if(options.indexOf(text) != -1) {
            options += text + ',';
        }
    }
}

当然，您也希望在取消选中复选框时进行处理。

Javascript在indexOf上检查.innerHTML

2 个答案: