Javascript take .innerHTML on indexOf

Question

'options'라는 변수가 있습니다. 사용자가 체크 박스 중 하나를 체크 할 때마다 체크 된 각 체크 박스에 대해 .innerHTML을 문자열에 채우기 위해 '옵션'이 필요합니다. 예를 들어, Instagram과 Google+를 선택하면 'options'= 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> 

자바 스크립트 :

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 당신이 추가/제거 할 수있는 배열을 만들 것입니다 (하지만 만약 당신이 결국 tabulate, 아무 걱정). 예를 들어

:

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

물론 확인란도 선택 취소 할 때 처리해야합니다.