如何在javascript中检查是否有某些连续的复选框被选中并添加折扣和相反

Question

我有一个带有 7 个复选框的表单，这些复选框具有

data-calculate

属性。当连续检查 3 到 5 时，我想操纵

data-calculate

值。从我的表格中获得第一次折扣和 3 个最多 5 个或更多复选框以获得第二次折扣。

我已经尝试了很多次来实现我想要的，但没有任何效果。此外，

else

声明有点令人困惑如何删除项目以及如何使用折扣和所有内容。

我把我的整个表格发给你检查也许有人可以帮我完成它。

let _log = (item) => {
  return console.log(item)
}

const week1 = document.querySelector(".c_week_1");
const week2 = document.querySelector(".c_week_2");
const week3 = document.querySelector(".c_week_3");
const week4 = document.querySelector(".c_week_4");
const week5 = document.querySelector(".c_week_5");
const week6 = document.querySelector(".c_week_6");
const week7 = document.querySelector(".c_week_7");

// Getting data attribute value
let week1Calc = week1.dataset.calculate;
let week2Calc = week2.dataset.calculate;
let week3Calc = week3.dataset.calculate;
let week4Calc = week4.dataset.calculate;
let week5Calc = week5.dataset.calculate;
let week6Calc = week6.dataset.calculate;
let week7Calc = week7.dataset.calculate;

// let sum = checkboxesCalculateValuesArray.reduce((accumulator, currentValue) => {
//         return parseInt(accumulator) + parseInt(currentValue);
//     });

// Output price
let price = document.querySelector(".c_final_price_1_kid");

// Initalial num
let count = 0;

// Arrays
// Selecting all inputs
let allCheckboxes = [week1, week2, week3, week4, week5, week6, week7];
// Selecting all inputs data-calculate value
let allCheckboxesCalcValues = [week1Calc, week2Calc, week3Calc, week4Calc, week5Calc, week6Calc, week7Calc];
// Adding all inputs that are checked
let checkboxesCheckedArray = [];
// Getting checkboxesCheckedArray index numbers
let checkboxesCheckedArrayNumbers = [];
// Adding the checked checkbox data-calculate attribute in the array
let checkboxesCalculateValuesArray = [];


// Selecting all checkboxes and their index
allCheckboxes.forEach((box, index) => {

  box.addEventListener("change", (e) => {

    if (box.checked) {

      // Check how many checkboxes are checked
      count++;

      // console.log(count)

      // Adding checked checkboxes to the array
      checkboxesCheckedArray.push(box);

      // Adding checked index to the array
      checkboxesCheckedArrayNumbers.push(index);

      // Sorting numbers array 
      checkboxesCheckedArrayNumbers.sort();

      checkboxesCalculateValuesArray.push(e.target.dataset.calculate);

      price.textContent = checkboxesCalculateValuesArray.reduce((accumulator, currentValue) => {
        return parseInt(accumulator) + parseInt(currentValue);
      });


      for (let i = 1; i < checkboxesCheckedArrayNumbers.length - 1; i++) {

        // Here are the 2 if statements. I am looking for consecutive checkboxes. 3 up to 5 and 3 up to 7

        // Check if 3 or more are in cunsecutive order
        if (checkboxesCheckedArrayNumbers[i - 1] === checkboxesCheckedArrayNumbers[i] - 1 && checkboxesCheckedArrayNumbers[i + 1] ===
          checkboxesCheckedArrayNumbers[i] + 1) {

          // When there are 3 up to 5 consecutive weeks then loop here to change data-calculate values to 84.15

          price.textContent = checkboxesCalculateValuesArray.reduce((accumulator, currentValue) => {
            return parseInt(accumulator) + parseInt(currentValue);
          });

          _log(checkboxesCalculateValuesArray)


        }


        // Check if 5 or more are in cunsecutive order
        if (checkboxesCheckedArrayNumbers[i - 2] === checkboxesCheckedArrayNumbers[i] - 2 && checkboxesCheckedArrayNumbers[i + 2] ===
          checkboxesCheckedArrayNumbers[i] + 2) {



        }

        // end of Check if 5 or more are in cunsecutive order

      }
      // End for loop


    } else {

      count--;

      console.log(count);

      // Adding checked checkboxes to the array
      checkboxesCheckedArray.pop(box);

      // Adding checked index to the array
      checkboxesCheckedArrayNumbers.pop(index);

      // Sorting numbers array 
      checkboxesCheckedArrayNumbers.sort();

      checkboxesCalculateValuesArray.pop(e.target.dataset.calculate);

      for (let i = 1; i < checkboxesCheckedArrayNumbers.length - 1; i++) {
        // Check if 3 or more are in cunsecutive order
        if (checkboxesCheckedArrayNumbers[i - 1] === checkboxesCheckedArrayNumbers[i] - 1 && checkboxesCheckedArrayNumbers[i + 1] ===
          checkboxesCheckedArrayNumbers[i] + 1) {


        }
        // END OF Check if 5 or more are in cunsecutive order

        // Check if 5 or more are in cunsecutive order

        if (checkboxesCheckedArrayNumbers[i - 2] === checkboxesCheckedArrayNumbers[i] - 2 && checkboxesCheckedArrayNumbers[i + 2] ===
          checkboxesCheckedArrayNumbers[i] + 2) {



        }

      }

    }

  })

})

let customForm = document.getElementsByTagName("form")[0];
const submitButton = document.querySelector(".c-main-calc-submit--button");
// _log(submitButton)

customForm.addEventListener("submit", (e) => {
  customForm.submit();
})

<form id="form">
  <div class="c-checkbox-box">
    <span>1</span>
    <input type="checkbox" class="c_week_1" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>2</span>
    <input type="checkbox" class="c_week_2" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>3</span>
    <input type="checkbox" class="c_week_3" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>4</span>
    <input type="checkbox" class="c_week_4" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>5</span>
    <input type="checkbox" class="c_week_5" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>6</span>
    <input type="checkbox" class="c_week_6" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>7</span>
    <input type="checkbox" class="c_week_7" data-calculate="99">
  </div>
</form>

<div class="c_final_price_1_kid"></div>

Answer 1

据我了解，您想设置/取消设置

data-calculate

属性值 并根据选中复选框的计数动态计算总和。如果是，那么您可以通过在复选框上应用单击事件侦听器并进行操作来简单地实现这一点。

在下面的演示中，通过检查元素，您可以在开发人员控制台中看到

data-calculate

根据选择/取消选择复选框时的

count

动态变化。

现场演示：

let count = 0;

document.querySelectorAll('input[type="checkbox"]').forEach(box => {
  box.addEventListener("click", (e) => {
    let sum = 0;
    box.checked ? count++ : count--;

    document.querySelectorAll('input[type="checkbox"]').forEach(box => {
      if (box.checked) {
        box.dataset.calculate = (count > 5 && count <= 7) ? (79.20) :
            ((count >= 3 && count <= 5) ? 84.15 : 99);
        sum = sum + parseFloat(box.dataset.calculate);
      }
    });
    // Assigning the sum of checked boxes into div inner text. 
    document.querySelector('.c_final_price_1_kid').innerText = sum.toFixed(2);
  })
});

<form id="form">
  <div class="c-checkbox-box">
    <span>1</span>
    <input type="checkbox" class="c_week_1" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>2</span>
    <input type="checkbox" class="c_week_2" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>3</span>
    <input type="checkbox" class="c_week_3" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>4</span>
    <input type="checkbox" class="c_week_4" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>5</span>
    <input type="checkbox" class="c_week_5" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>6</span>
    <input type="checkbox" class="c_week_6" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>7</span>
    <input type="checkbox" class="c_week_7" data-calculate="99">
  </div>
</form>

<div class="c_final_price_1_kid"></div>

Answer 2

在此实现中，我们首先使用 querySelector 和 querySelectorAll 方法选择表单和所有复选框。我们还将两个折扣百分比定义为 discount1 和 discount2。然后我们初始化一些变量来跟踪检查项目的数量和总价。

然后我们循环遍历每个复选框并添加一个事件监听器来监听复选框状态的变化。当一个复选框被选中或取消选中时，我们相应地更新 checkedCount 和 totalPrice 变量。然后我们检查是否有 3 到 5 个复选框被选中，如果是，则应用第二次折扣

const form = document.querySelector('#form');
const checkboxes = form.querySelectorAll('input[type="checkbox"]');
const discount1 = 0.1; // 10% discount for 1st checked item
const discount2 = 0.2; // 20% discount for 3 or more checked items

let checkedCount = 0;
let totalPrice = 0;

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      checkedCount++;
      totalPrice += parseInt(checkbox.dataset.calculate);
    } else {
      checkedCount--;
      totalPrice -= parseInt(checkbox.dataset.calculate);
    }

    if (checkedCount >= 3 && checkedCount <= 5) {
      // apply 2nd discount
      const discountAmount = totalPrice * discount2;
      const finalPrice = totalPrice - discountAmount;
      document.querySelector('.c_final_price_1_kid').textContent = finalPrice;
    } else if (checkedCount === 1) {
      // apply 1st discount
      const discountAmount = totalPrice * discount1;
      const finalPrice = totalPrice - discountAmount;
      document.querySelector('.c_final_price_1_kid').textContent = finalPrice;
    } else {
      // no discount applied
      document.querySelector('.c_final_price_1_kid').textContent = totalPrice;
    }
  });
});

<form id="form">
  <div class="c-checkbox-box">
    <span>1</span>
    <input type="checkbox" class="c_week_1" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>2</span>
    <input type="checkbox" class="c_week_2" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>3</span>
    <input type="checkbox" class="c_week_3" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>4</span>
    <input type="checkbox" class="c_week_4" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>5</span>
    <input type="checkbox" class="c_week_5" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>6</span>
    <input type="checkbox" class="c_week_6" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>7</span>
    <input type="checkbox" class="c_week_7" data-calculate="99">
  </div>
</form>

<div class="c_final_price_1_kid"></div>