计算复选框中的数据值

Question

我正在寻找一种方法来计算复选框中的数据值。正如您在下面的示例中看到的，当您从复选框中选择位置时，它会计算主要值，结果显示在绿色框中。我还需要获取屏幕总数、范围和其他。它应该出现在摘要部分。谢谢你！

var checkboxes = document.querySelectorAll('.sum')

var select = document.querySelector('#select')

var total3 = document.querySelector('#payment-total')

var total6 = document.querySelector('#payment-total2')

var total12 = document.querySelector('#payment-total3')

var screenwad = 5

var screenkalw = 6

var screenzat = 4

var totalscreen = document.querySelector('#total-screen')

var checkboxesTotal = 0;

var selectTotal = 0;

checkboxes.forEach(function(input) {

  input.addEventListener('change', onCheckboxSelect)

})

select.addEventListener('click', onSelectChange)

function onCheckboxSelect(e) {

  var sign = e.target.checked ? 1 : -1

  checkboxesTotal += sign * parseInt(e.target.value, 10)

  var select = document.getElementById("select");

  // get selected value and assign it to the global variable selectTotal

  selectTotal = select.options[select.selectedIndex].value;

  renderTotal()

}

function onSelectChange(e) {

  var value = parseInt(e.target.value, 10)

  if (!isNaN(value)) {

    selectTotal = value

    renderTotal()

  }

}

function renderTotal() {

  //NORMALNA CENA

  total3.innerHTML = checkboxesTotal * selectTotal 

  // 10% TANIEJ

  total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal)

  // 20% TANIEJ

  total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)

  //WADOWICE

}

Answer 1

在这里，我向这些字段添加了一些id selector内容，并创建了一个渲染函数来渲染摘要部分。var checkboxes = document.querySelectorAll('.sum')var select = document.querySelector('#select')var total3 = document.querySelector('#payment-total')var total6 = document.querySelector('#payment-total2')var total12 = document.querySelector('#payment-total3')const totalScreenDiv = document.querySelector('#total-screen');const totalRangeDiv = document.querySelector('#total-range');const totalOtherDiv = document.querySelector('#total-other');const screen1 = document.querySelector('#screen-1');const screen2 = document.querySelector('#screen-2');const screen3 = document.querySelector('#screen-3');const range1 = document.querySelector('#range-1');const range2 = document.querySelector('#range-2');const range3 = document.querySelector('#range-3');const other1 = document.querySelector('#other-1');const other2 = document.querySelector('#other-2');const other3 = document.querySelector('#other-3');var screenwad = 5var screenkalw = 6var screenzat = 4var totalscreen = document.querySelector('#total-screen')var checkboxesTotal = 0;var selectTotal = 0;checkboxes.forEach(function(input) {&nbsp; input.addEventListener('change', onCheckboxSelect)})select.addEventListener('click', onSelectChange)function onCheckboxSelect(e) {&nbsp; var sign = e.target.checked ? 1 : -1&nbsp; checkboxesTotal += sign * parseInt(e.target.value, 10);&nbsp;&nbsp;&nbsp; const summary = getSummary(e.target);&nbsp;&nbsp;&nbsp; var select = document.getElementById("select");&nbsp; // get selected value and assign it to the global variable selectTotal&nbsp; selectTotal = select.options[select.selectedIndex].value;&nbsp; renderTotal();&nbsp; renderSummary(summary);}function onSelectChange(e) {&nbsp; var value = parseInt(e.target.value, 10)&nbsp; if (!isNaN(value)) {&nbsp; &nbsp; selectTotal = value&nbsp; &nbsp; renderTotal()&nbsp; }}function getSummary(selectedDiv) {&nbsp; const data = {totalScreen: +totalScreenDiv.innerText.replace(',',''), totalRange: +totalRangeDiv.innerText.replace(',', ''), totalOther: +totalOtherDiv.innerText.replace(',', '')};&nbsp; const sign = selectedDiv.checked ? 1 : -1;&nbsp; if(selectedDiv.getAttribute('id') === 'styled-checkbox-1') {&nbsp; &nbsp; if(sign === 1) {&nbsp; &nbsp; &nbsp; data.totalScreen += +(screen1.innerText.replace(',', ''));&nbsp; &nbsp; &nbsp; data.totalRange += +(range1.innerText.replace(',', ''));&nbsp; &nbsp; &nbsp; data.totalOther += +(other1.innerText.replace(',', ''));&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''));&nbsp; &nbsp; &nbsp; if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))&nbsp; &nbsp; }&nbsp; } else if(selectedDiv.getAttribute('id') === 'styled-checkbox-2') {&nbsp; &nbsp; if(sign === 1) {&nbsp; &nbsp; &nbsp; data.totalScreen += +(screen2.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; data.totalRange += +(range2.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; data.totalOther += +(other2.innerText.replace(',', ''))&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; if(data.totalOther > 0) data.totalOther -= +(other2.innerText.replace(',', ''))&nbsp; &nbsp; }&nbsp; } else if(selectedDiv.getAttribute('id') === 'styled-checkbox-3') {&nbsp; &nbsp; if(sign === 1) {&nbsp; &nbsp; &nbsp; data.totalScreen += +(screen3.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; data.totalRange += +(range3.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; data.totalOther += +(other3.innerText.replace(',', ''))&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; if(data.totalScreen > 0) data.totalScreen -= +(screen3.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; if(data.totalRange > 0) data.totalRange -= +(range3.innerText.replace(',', ''))&nbsp; &nbsp; &nbsp; if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;&nbsp; return data;}function renderSummary({totalScreen, totalRange, totalOther}) {&nbsp; totalScreenDiv.innerHTML = totalScreen.toLocaleString();&nbsp; totalRangeDiv.innerHTML = totalRange.toLocaleString();&nbsp; totalOtherDiv.innerHTML = totalOther.toLocaleString();}function renderTotal() {&nbsp; //NORMALNA CENA&nbsp; total3.innerHTML = checkboxesTotal * selectTotal&nbsp;&nbsp; // 10% TANIEJ&nbsp; total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal)&nbsp; // 20% TANIEJ&nbsp; total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)&nbsp; //WADOWICE}/*CENNIK*/body {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; font-family: Europa;}.pt_title {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; background: #2c4949;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; height: 60px;&nbsp; &nbsp; line-height: 60px;}.pt_months {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; background: #9B8C70;&nbsp; &nbsp; height: 70px;&nbsp; &nbsp; line-height: 70px;}.col-x.month {&nbsp; &nbsp; text-align: center;}.cennik .pt-container {&nbsp; &nbsp; padding: 0 100px;}.col-x {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 25%;&nbsp; &nbsp; float: left;}.pt_sub {&nbsp; &nbsp; background: #F4F1ED;&nbsp; &nbsp; height: 40px;&nbsp; &nbsp; line-height: 40px;&nbsp; &nbsp; box-shadow: 0px 1px 2px 0px #00000029;&nbsp; &nbsp; z-index: 9;&nbsp; &nbsp; position: relative;}.pt_sub .col-x {&nbsp; &nbsp; color: #352B25;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; font-weight: 100;}/*TABLE*/.cennik ul li {&nbsp; &nbsp; list-style: none!important;&nbsp; &nbsp; float: left;&nbsp; &nbsp; min-width: 100%;&nbsp; &nbsp; background: #e6e6e6;&nbsp; &nbsp; border-bottom: 1px solid #00000021;&nbsp; &nbsp; margin-left: 0!important;&nbsp; &nbsp; padding-left: 0px !important;}.cennik ul {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}.pt-place {&nbsp; &nbsp; padding: 15px 0;}.pt-place .month {&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; color: #2c4949;}.pt_table ul {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 100%;}.pt-place .month span {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; color: #2c4949;}.pt_months .month {&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; font-weight: 700;}/*CHECKBOX*/.checkbox.col-x {&nbsp; &nbsp; color: #858585;&nbsp; &nbsp; font-weight: 700;}.checkbox.col-x span:hover {&nbsp; &nbsp; color: #354949;}.styled-checkbox {&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;opacity: 0;}&nbsp;.styled-checkbox + label {&nbsp; &nbsp; &nbsp;position: relative;&nbsp; &nbsp; &nbsp;cursor: pointer;&nbsp; &nbsp; &nbsp;padding: 0;}.styled-checkbox + label:before {&nbsp; &nbsp; content: '';&nbsp; &nbsp; margin-right: 10px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; vertical-align: text-top;&nbsp; &nbsp; width: 24px;&nbsp; &nbsp; height: 24px;&nbsp; &nbsp; background: #ffffff00;&nbsp; &nbsp; border: 2px solid #858585;&nbsp; &nbsp; border-radius: 6px;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; -webkit-transition: all 0.1s ease;&nbsp; &nbsp; -moz-transition: all 0.1s ease;&nbsp; &nbsp; -o-transition: all 0.1s ease;&nbsp; &nbsp; transition: all 0.1s ease;}.styled-checkbox:hover + label:before {&nbsp; &nbsp; background: #ffffff00;&nbsp; &nbsp; border: 4px solid #9B8C70;}&nbsp;.styled-checkbox:focus + label:before {&nbsp; &nbsp; &nbsp;box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);}.styled-checkbox:checked + label:before {&nbsp; &nbsp; background: #9B8C70;}&nbsp;.styled-checkbox:disabled + label {&nbsp; &nbsp; &nbsp;color: #b8b8b8;&nbsp; &nbsp; &nbsp;cursor: auto;}&nbsp;.styled-checkbox:disabled + label:before {&nbsp; &nbsp; &nbsp;box-shadow: none;&nbsp; &nbsp; &nbsp;background: #ddd;}.styled-checkbox:checked + label:after {&nbsp; &nbsp; content: '';&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 6.5px;&nbsp; &nbsp; top: 14px;&nbsp; &nbsp; background: #FDF1D1;&nbsp; &nbsp; width: 2px;&nbsp; &nbsp; height: 2px;&nbsp; &nbsp; box-shadow: 2px 0 0 #FDF1D1, 4px 0 0 #FDF1D1, 4px -2px 0 #FDF1D1, 4px -4px 0 #FDF1D1, 4px -6px 0 #FDF1D1, 4px -8px 0 #FDF1D1;&nbsp; &nbsp; transform: rotate(45deg);}.pt-place.disabled {&nbsp; &nbsp; opacity: 0.5;}span.discount {&nbsp; &nbsp; color: #FFD383!important;}.cennik li.pt-place:hover {&nbsp; &nbsp; background: #f4f1ed;}.pt_footer {&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; color: #FDF1D1;&nbsp; &nbsp; background: #2c4949;&nbsp; &nbsp; padding: 20px 0;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 100%;}.pt_footer span {&nbsp; &nbsp; color: #FDF1D1;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; letter-spacing: 2px;}#payment-total,#payment-total2,#payment-total3 {&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; letter-spacing: 0px;}.currency {&nbsp; &nbsp; color: #fff!important;&nbsp; &nbsp; text-transform: lowercase!important;&nbsp; &nbsp; font-size: 20px!important;&nbsp; &nbsp; letter-spacing: 0px!important;}.col-x.spot span {&nbsp; &nbsp; letter-spacing: 0px;&nbsp; &nbsp; margin-right: 10px;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-transform: inherit;&nbsp; &nbsp; font-size: 16px;}.col-x.spot {&nbsp; &nbsp; margin-top: 5px;}.cennik select {&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; border-radius: 30px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; font: inherit;&nbsp; &nbsp; line-height: 1.5em;&nbsp; &nbsp; padding: 0.5em 3.5em 0.5em 1em;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; -moz-appearance: none;&nbsp; &nbsp; &nbsp;cursor: pointer;&nbsp; &nbsp; &nbsp;font-size: 16px;}.cennik select.round {&nbsp; &nbsp; background-image: linear-gradient(45deg, #ffffff00 50%, gray 50%), linear-gradient(135deg, grey 50%, transparent 50%), radial-gradient(#ddd0 70%, transparent 72%);&nbsp; &nbsp; background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;&nbsp; &nbsp; background-size: 5px 5px, 5px 5px, 1.5em 1.5em;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; color: #2c4949;}.cennik select.round:focus {&nbsp; &nbsp; background-image: linear-gradient(45deg, #354949 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #354949 50%), radial-gradient(#ff000000 70%, transparent 72%);&nbsp; &nbsp; background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - .5em) .5em;&nbsp; &nbsp; background-size: 5px 5px, 5px 5px, 1.5em 1.5em;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; outline: 0;}.cennik .checkbox {&nbsp; &nbsp; margin-top: 0!important;&nbsp; &nbsp; margin-bottom: 0!important;}.cennik_page .wpb_raw_code.wpb_content_element.wpb_raw_html {&nbsp; &nbsp; margin-bottom: -10px!important;}span.link {&nbsp; &nbsp; font-weight: 700;}<div class="cennik"><div class="pt_header">&nbsp; &nbsp; <div class="pt_months">&nbsp; &nbsp; &nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x search" style="color: #0000;">Szukaj</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x month">SCREENS</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x month">RANGE</span></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x month">OTHER</span></div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="pt_sub">&nbsp; &nbsp; &nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x">LOCATIONS:</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x month">Digital Signage</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x month">MONTHLY</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-x month">MONTHLY</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div><div class="pt_table"><ul><li class="pt-place">&nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; <div class="checkbox col-x"><input value="190" data-screen="5" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-1">&nbsp; &nbsp; <label for="styled-checkbox-1"><span class="link">PLACE ONE</span></label></div>&nbsp; &nbsp; <div class="col-x month"><span id="screen-1">5</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="range-1">10,000</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="other-1">250,000</span></div>&nbsp; &nbsp; </div></li><li class="pt-place">&nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; <div class="checkbox col-x"><input value="190" data-screen="6" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-2">&nbsp; &nbsp; <label for="styled-checkbox-2"><span class="link">PLACE TWO</span></label></div>&nbsp; &nbsp; <div class="col-x month"><span id="screen-2">5</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="range-2">10,000</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="other-2">250,000</span></div>&nbsp; &nbsp; </div></li><li class="pt-place">&nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; <div class="checkbox col-x"><input value="130" data-screen="4" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-3">&nbsp; &nbsp; <label for="styled-checkbox-3"><span class="link">PLACE THREE</span></label></div>&nbsp; &nbsp; <div class="col-x month"><span id="screen-3">5</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="range-3">10,000</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="other-3">250,000</span></div>&nbsp; &nbsp; </div></li><li class="pt-place disabled">&nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; <div class="checkbox col-x"><span class="link">SUMMARY:</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="total-screen">0</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="total-range">0</span></div>&nbsp; &nbsp; <div class="col-x month"><span id="total-other">0</span></div>&nbsp; &nbsp; </div></li></ul></div><div class="pt_footer">&nbsp; &nbsp; <div class="pt-container">&nbsp; &nbsp; <div class="col-x spot">&nbsp; &nbsp; <span>Spot: </span>&nbsp; &nbsp; <select id="select" name="select" class="round">&nbsp; &nbsp; &nbsp; &nbsp; <option value="1" class="sum">5 seconds</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="2" class="sum" selected="selected">10 seconds</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="3" class="sum">15 seconds</option>&nbsp; &nbsp; </select>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-x month"><span>3 MONTHS</span><hr style="border: none;&nbsp; &nbsp; margin: 4px;"><span id="payment-total">0</span> <span class="currency">$</span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-x month"><span>6 MONTHS <span style="color:#FFD383">-10%</span></span><hr style="border: none;&nbsp; &nbsp; margin: 4px;"><span id="payment-total2">0</span> <span class="currency">$</span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-x month"><span>12 MONTHS <span style="color:#FFD383">-20%</span></span><hr style="border: none;&nbsp; &nbsp; margin: 4px;"><span id="payment-total3">0</span> <span class="currency">$</span>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>