Javascript在index上檢索.innerHTML檢查

Question

我有一個名爲'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開始，但最終通過檢查和取消選中幾個選項，最終成爲負值（總價）。

此外，作爲字符串的選項將變得難以跟上。我probbaly作出這樣的，你可以添加/刪除從一個數組（但如果你在製表年底，有沒有令人擔憂的）。

例如：

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 + ','; 
     } 
    } 
} 

當然，你還願意要處理時複選框處於未選中狀態爲好。