计算复选框中的数据值

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 = 5var screenkalw = 6var screenzat = 4var 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 = 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);

  

  const summary = getSummary(e.target);

  

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

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

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

  renderTotal();

  renderSummary(summary);

}

function onSelectChange(e) {

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

  if (!isNaN(value)) {

    selectTotal = value

    renderTotal()

  }

}

function getSummary(selectedDiv) {

  const data = {totalScreen: +totalScreenDiv.innerText.replace(',',''), totalRange: +totalRangeDiv.innerText.replace(',', ''), totalOther: +totalOtherDiv.innerText.replace(',', '')};

  const sign = selectedDiv.checked ? 1 : -1;

  if(selectedDiv.getAttribute('id') === 'styled-checkbox-1') {

    if(sign === 1) {

      data.totalScreen += +(screen1.innerText.replace(',', ''));

      data.totalRange += +(range1.innerText.replace(',', ''));

      data.totalOther += +(other1.innerText.replace(',', ''));

    } else {

      if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''));

      if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))

      if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))

    }

  } else if(selectedDiv.getAttribute('id') === 'styled-checkbox-2') {

    if(sign === 1) {

      data.totalScreen += +(screen2.innerText.replace(',', ''))

      data.totalRange += +(range2.innerText.replace(',', ''))

      data.totalOther += +(other2.innerText.replace(',', ''))

    } else {

      if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''))

      if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))

      if(data.totalOther > 0) data.totalOther -= +(other2.innerText.replace(',', ''))

    }

  } else if(selectedDiv.getAttribute('id') === 'styled-checkbox-3') {

    if(sign === 1) {

      data.totalScreen += +(screen3.innerText.replace(',', ''))

      data.totalRange += +(range3.innerText.replace(',', ''))

      data.totalOther += +(other3.innerText.replace(',', ''))

    } else {

      if(data.totalScreen > 0) data.totalScreen -= +(screen3.innerText.replace(',', ''))

      if(data.totalRange > 0) data.totalRange -= +(range3.innerText.replace(',', ''))

      if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))

    }

  }

  

  return data;

}

function renderSummary({totalScreen, totalRange, totalOther}) {

  totalScreenDiv.innerHTML = totalScreen.toLocaleString();

  totalRangeDiv.innerHTML = totalRange.toLocaleString();

  totalOtherDiv.innerHTML = totalOther.toLocaleString();

}

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

}

/*CENNIK*/

body {

    margin: 0;

    font-family: Europa;

}

.pt_title {

    text-align: center;

    background: #2c4949;

    color: #fff;

    font-size: 20px;

    height: 60px;

    line-height: 60px;

}

.pt_months {

    color: #fff;

    background: #9B8C70;

    height: 70px;

    line-height: 70px;

}

.col-x.month {

    text-align: center;

}

.cennik .pt-container {

    padding: 0 100px;

}

.col-x {

    display: inline-block;

    width: 25%;

    float: left;

}

.pt_sub {

    background: #F4F1ED;

    height: 40px;

    line-height: 40px;

    box-shadow: 0px 1px 2px 0px #00000029;

    z-index: 9;

    position: relative;

}

.pt_sub .col-x {

    color: #352B25;

    font-size: 14px;

    font-weight: 100;

}

/*TABLE*/

.cennik ul li {

    list-style: none!important;

    float: left;

    min-width: 100%;

    background: #e6e6e6;

    border-bottom: 1px solid #00000021;

    margin-left: 0!important;

    padding-left: 0px !important;

}

.cennik ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.pt-place {

    padding: 15px 0;

}

.pt-place .month {

    font-weight: 700;

    color: #2c4949;

}

.pt_table ul {

    display: inline-block;

    position: relative;

    width: 100%;

}

.pt-place .month span {

    font-size: 16px;

    font-weight: 700;

    color: #2c4949;

}

.pt_months .month {

    font-size: 20px;

    text-transform: uppercase;

    font-weight: 700;

}

/*CHECKBOX*/

.checkbox.col-x {

    color: #858585;

    font-weight: 700;

}

.checkbox.col-x span:hover {

    color: #354949;

}

.styled-checkbox {

     position: absolute;

     opacity: 0;

}

 .styled-checkbox + label {

     position: relative;

     cursor: pointer;

     padding: 0;

}

.styled-checkbox + label:before {

    content: '';

    margin-right: 10px;

    display: inline-block;

    vertical-align: text-top;

    width: 24px;

    height: 24px;

    background: #ffffff00;

    border: 2px solid #858585;

    border-radius: 6px;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -webkit-transition: all 0.1s ease;

    -moz-transition: all 0.1s ease;

    -o-transition: all 0.1s ease;

    transition: all 0.1s ease;

}

.styled-checkbox:hover + label:before {

    background: #ffffff00;

    border: 4px solid #9B8C70;

}

 .styled-checkbox:focus + label:before {

     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);

}

.styled-checkbox:checked + label:before {

    background: #9B8C70;

}

 .styled-checkbox:disabled + label {

     color: #b8b8b8;

     cursor: auto;

}

 .styled-checkbox:disabled + label:before {

     box-shadow: none;

     background: #ddd;

}

.styled-checkbox:checked + label:after {

    content: '';

    position: absolute;

    left: 6.5px;

    top: 14px;

    background: #FDF1D1;

    width: 2px;

    height: 2px;

    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;

    transform: rotate(45deg);

}

.pt-place.disabled {

    opacity: 0.5;

}

span.discount {

    color: #FFD383!important;

}

.cennik li.pt-place:hover {

    background: #f4f1ed;

}

.pt_footer {

    font-size: 14px;

    font-weight: 700;

    color: #FDF1D1;

    background: #2c4949;

    padding: 20px 0;

    display: inline-block;

    width: 100%;

}

.pt_footer span {

    color: #FDF1D1;

    font-size: 14px;

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 2px;

}

#payment-total,#payment-total2,#payment-total3 {

    font-size: 20px;

    color: #fff;

    letter-spacing: 0px;

}

.currency {

    color: #fff!important;

    text-transform: lowercase!important;

    font-size: 20px!important;

    letter-spacing: 0px!important;

}

.col-x.spot span {

    letter-spacing: 0px;

    margin-right: 10px;

    color: #fff;

    text-transform: inherit;

    font-size: 16px;

}

.col-x.spot {

    margin-top: 5px;

}

.cennik select {

    background-color: white;

    border-radius: 30px;

    display: inline-block;

    font: inherit;

    line-height: 1.5em;

    padding: 0.5em 3.5em 0.5em 1em;

    margin: 0;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-appearance: none;

    -moz-appearance: none;

     cursor: pointer;

     font-size: 16px;

}

.cennik select.round {

    background-image: linear-gradient(45deg, #ffffff00 50%, gray 50%), linear-gradient(135deg, grey 50%, transparent 50%), radial-gradient(#ddd0 70%, transparent 72%);

    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;

    background-size: 5px 5px, 5px 5px, 1.5em 1.5em;

    background-repeat: no-repeat;

    color: #2c4949;

}

.cennik select.round:focus {

    background-image: linear-gradient(45deg, #354949 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #354949 50%), radial-gradient(#ff000000 70%, transparent 72%);

    background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - .5em) .5em;

    background-size: 5px 5px, 5px 5px, 1.5em 1.5em;

    background-repeat: no-repeat;

    outline: 0;

}

.cennik .checkbox {

    margin-top: 0!important;

    margin-bottom: 0!important;

}

.cennik_page .wpb_raw_code.wpb_content_element.wpb_raw_html {

    margin-bottom: -10px!important;

}

span.link {

    font-weight: 700;

}

<div class="cennik">

<div class="pt_header">

    <div class="pt_months">

        <div class="pt-container">

        <div class="col-x search" style="color: #0000;">Szukaj</div>

        <div class="col-x month">SCREENS</div>

        <div class="col-x month">RANGE</span></div>

        <div class="col-x month">OTHER</span></div>

        </div>

    </div>

    <div class="pt_sub">

        <div class="pt-container">

        <div class="col-x">LOCATIONS:</div>

        <div class="col-x month">Digital Signage</div>

        <div class="col-x month">MONTHLY</div>

        <div class="col-x month">MONTHLY</div>

        </div>

    </div>

</div>

<div class="pt_table">

<ul>

<li class="pt-place">

    <div class="pt-container">

    <div class="checkbox col-x"><input value="190" data-screen="5" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-1">

    <label for="styled-checkbox-1"><span class="link">PLACE ONE</span></label></div>

    <div class="col-x month"><span id="screen-1">5</span></div>

    <div class="col-x month"><span id="range-1">10,000</span></div>

    <div class="col-x month"><span id="other-1">250,000</span></div>

    </div>

</li>

<li class="pt-place">

    <div class="pt-container">

    <div class="checkbox col-x"><input value="190" data-screen="6" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-2">

    <label for="styled-checkbox-2"><span class="link">PLACE TWO</span></label></div>

    <div class="col-x month"><span id="screen-2">5</span></div>

    <div class="col-x month"><span id="range-2">10,000</span></div>

    <div class="col-x month"><span id="other-2">250,000</span></div>

    </div>

</li>

<li class="pt-place">

    <div class="pt-container">

    <div class="checkbox col-x"><input value="130" data-screen="4" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-3">

    <label for="styled-checkbox-3"><span class="link">PLACE THREE</span></label></div>

    <div class="col-x month"><span id="screen-3">5</span></div>

    <div class="col-x month"><span id="range-3">10,000</span></div>

    <div class="col-x month"><span id="other-3">250,000</span></div>

    </div>

</li>

<li class="pt-place disabled">

    <div class="pt-container">

    <div class="checkbox col-x"><span class="link">SUMMARY:</span></div>

    <div class="col-x month"><span id="total-screen">0</span></div>

    <div class="col-x month"><span id="total-range">0</span></div>

    <div class="col-x month"><span id="total-other">0</span></div>

    </div>

</li>

</ul>

</div>

<div class="pt_footer">

    <div class="pt-container">

    <div class="col-x spot">

    <span>Spot: </span>

    <select id="select" name="select" class="round">

        <option value="1" class="sum">5 seconds</option>

        <option value="2" class="sum" selected="selected">10 seconds</option>

        <option value="3" class="sum">15 seconds</option>

    </select>

    </div>

    <div class="col-x month"><span>3 MONTHS</span><hr style="border: none;

    margin: 4px;"><span id="payment-total">0</span> <span class="currency">$</span>

    </div>

    <div class="col-x month"><span>6 MONTHS <span style="color:#FFD383">-10%</span></span><hr style="border: none;

    margin: 4px;"><span id="payment-total2">0</span> <span class="currency">$</span>

    </div>

    <div class="col-x month"><span>12 MONTHS <span style="color:#FFD383">-20%</span></span><hr style="border: none;

    margin: 4px;"><span id="payment-total3">0</span> <span class="currency">$</span>

    </div>

    </div>

</div>