How to check if checked checkboxes are in a consecutive order using javascript

NoName84
March 27, 2023
143 views
0 votes
2 Answers

I am creating a form

I would like to check if the checkboxes that are checked,
if the checked elemens are in a consecutive order.

Examples:

Check if 3 or more checkboxes are checked, and also if they are in a consecutive order for example if 1-2-3 checkboxes are checked.
Once this is verified then the data-calculate price to be 84.10.
If 1-2-5 checkboxes are checked then the data-calculate attribute for all checkboxes to be 99.00.
If 3-4-5-6-7 checkboxes are checked then the data-calculate to be 79.10.

I will provide the HTML and JS code for you to understand. The code is working but I want to add the consecutive weeks also. I added a comment about where my the extra code should go. Here is my code. If something is not clear please let me know to make it clear. Thanks.

HTML Code

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");

let allCheckboxes = [week1, week2, week3, week4, week5, week6, week7];

let hatCheckboxes = document.querySelectorAll(".c-hat-checkbox")
let tshirtCheckboxes = document.querySelectorAll(".c-tshirt-checkbox")
let usbCheckboxes = document.querySelectorAll(".c-usb-checkbox")


let tshirtPrice = 0;
let hatPrice = 0;
let usbPrice = 0;
let tripsPrice = 0;

let count = 0;

allCheckboxes.forEach((box, index) => {



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

    let sum = 0;

    if (box.checked) {
      count++
    } else {
      count--
      box.dataset.calculate = 99.00;
    }

    sum = count * 28.5;


    allCheckboxes.forEach(box => {

      if (box.checked) {

        if (count > 5 && count <= 7) {

          // Here is the 3-7 weeks consecutive checkboxes checked
          // Here is the 3-7 weeks consecutive checkboxes checked
          // Here is the 3-7 weeks consecutive checkboxes checked
          box.dataset.calculate = 79.20;

        } else if (count >= 3 && count <= 5) {

          // Here is the 3-4 weeks consecutive checkboxes checked
          // Here is the 3-4 weeks consecutive checkboxes checked
          // Here is the 3-4 weeks consecutive checkboxes checked
          if (box[index - 1] === box[index] - 1 && box[index + 1] ===
            box[index] + 1) {

            _log("working");

          } else {

            _log("not working")

          }

          box.dataset.calculate = 84.15;

        } else {
          // Normal price without discount
          box.dataset.calculate = 99.00;

        }

        sum = sum + parseFloat(box.dataset.calculate);

      }

    });

    let tshirtResult = tshirtCheckboxes.forEach((box) => {
      box.addEventListener("click", (e) => {
        tshirtPrice = parseFloat(e.target.dataset.calculate)
        document.querySelector('.c_final_price_1_kid').innerText = parseFloat(sum.toFixed(4)) + tshirtPrice + hatPrice + usbPrice;
      })
    })

    let hatResult = hatCheckboxes.forEach((box) => {
      box.addEventListener("click", (e) => {
        hatPrice = parseFloat(e.target.dataset.calculate)
        document.querySelector('.c_final_price_1_kid').innerText = parseFloat(sum.toFixed(4)) + tshirtPrice + hatPrice + usbPrice;
      })
    })

    let usnResult = usbCheckboxes.forEach((box) => {
      box.addEventListener("click", (e) => {
        usbPrice = parseFloat(e.target.dataset.calculate)
        document.querySelector('.c_final_price_1_kid').innerText = parseFloat(sum.toFixed(4)) + tshirtPrice + hatPrice + usbPrice;
      })
    })

    let result = document.querySelector('.c_final_price_1_kid').innerText = parseFloat(sum.toFixed(4));

  })
});

<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>

  <div class="c-checkbox-box">
    <div class="c-checkbox-box">
      <span>TSHIRT</span>
      <input type="radio" name="c-equipement2" class="c-tshirt-checkbox" data-calculate="0">
      <input type="radio" name="c-equipement2" class="c-tshirt-checkbox" data-calculate="9">
      <input type="radio" name="c-equipement2" class="c-tshirt-checkbox" data-calculate="9">
      <input type="radio" name="c-equipement2" class="c-tshirt-checkbox" data-calculate="9">
    </div>
    <span>Hat</span>
    <input type="radio" name="c-equipement1" class="c-hat-checkbox" data-calculate="0">
    <input type="radio" name="c-equipement1" class="c-hat-checkbox" data-calculate="10">
    <input type="radio" name="c-equipement1" class="c-hat-checkbox" data-calculate="10">
    <input type="radio" name="c-equipement1" class="c-hat-checkbox" data-calculate="10">
  </div>
  <div class="c-checkbox-box">
    <span>USB</span>
    <input type="radio" name="c-equipement3" class="c-usb-checkbox" data-calculate="0">
    <input type="radio" name="c-equipement3" class="c-usb-checkbox" data-calculate="17">
    <input type="radio" name="c-equipement3" class="c-usb-checkbox" data-calculate="17">
    <input type="radio" name="c-equipement3" class="c-usb-checkbox" data-calculate="17">
  </div>

</form>

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

Answers

Try this code in your event listener:

let checkedBoxes = allCheckboxes.filter(box => box.checked).map(v => v.class.charAt(v.length-1)).sort();
let newPrice = 100;
checkedBoxes.forEach((v, i) => {
  if (checkedBoxes.length > 5 && checkedBoxes[i+2]-2 === v && v == checkedBoxes[i+1]-1 === v && v == checkedBoxes[i+3]-3 === v && v == checkedBoxes[i+4]-4 === v && v == checkedBoxes[i+5]-5 === v && newPrice > 79.2)
    newPrice = 79.2;
  else if (checkedBoxes.length > 2 && checkedBoxes[i+2]-2 === v && v == checkedBoxes[i+1]-1 === v && newPrice > 84.15)
    newPrice = 84.15;
  else if (newPrice > 99)
    newPrice = 99.00;
});
box.dataset.calculate = newPrice;

Not 100 percent sure on your desire here but I took this as maximum number of items in a sequence with no gaps for the maxSeq calculation.

I did some class additions and simplified code so functions only do one thing as needed. I created some global objects (debatable practice) to hold the values but you can namespace those or otherwise improve that.

Rather than do a complicated calculation sequence I simply did the counts then dispatched events to set prices.(assumptions made on that based only on what I saw).

This is a super fast example and not 100% production ready.

const allCheckboxes = document.querySelectorAll('.weeks-container .c-checkbox-box  input[type="checkbox"].c-week');
const hatCheckboxes = document.querySelectorAll(".c-hat-checkbox");
const tshirtCheckboxes = document.querySelectorAll(".c-tshirt-checkbox");
const usbCheckboxes = document.querySelectorAll(".c-usb-checkbox");
// console.log(allCheckboxes.length);

let prices = {
  tshirtPrice: 0,
  hatPrice: 0,
  usbPrice: 0,
  tripsPrice: 0,
  currentValue: 0
};
let baseValues = {
  low: 28.50,
  mid: 79.20,
  hi: 84.15,
  max: 99.00
};
let calcItems = {
  checkedCount: 0,
  seqCount: 0
};

function checkSequenceCount(checks) {
  let maxCount = 0;
  let count = 1;
  for (let i = 0; i < (checks.length - 1); i++) {
    if (checks[i].index == (checks[i + 1].index - 1)) {
      count++;
      let resetMax = maxCount <= count;
      maxCount = resetMax ? count : maxCount;
    } else {
      count = 1;
    }
  }
  return maxCount;
}

function getCheckedList(checks) {
  const checkedChecks = [];
  checks.forEach(function(check, index, array) {
    if (check.checked)
      checkedChecks.push({
        checked: check.checked,
        index: index
      });
  });
  return checkedChecks;
}

function handleRadioChange(event) {
  this.dispatchEvent(calcEvent);
}

function handleChange(event) {
  let box = this;
  const checkedList = getCheckedList([...allCheckboxes]);
  //  console.log("list:", checkedList);
  const checked = [...allCheckboxes].filter(cbx => cbx.checked);
  let numberChecked = checked.length;
  let maxSeq = checkSequenceCount(checkedList);
  calcItems.seqCount = maxSeq;
  calcItems.checkedCount = numberChecked;
  if (maxSeq > 5) {
    baseValues.currentValue = baseValues.mid;
  }
  if (maxSeq == 3 || maxSeq == 4) {
    baseValues.currentValue = baseValues.hi;
  } else {
    // Normal price without discount
    baseValues.currentValue = baseValues.max;
  }
  const hatSelected = document.querySelector('input[name="c-equipement1"]:checked');
  const usbSelected = document.querySelector('input[name="c-equipement3"]:checked');
  const shirtSelected = document.querySelector('input[name="c-equipement"]:checked');
  if (!!hatSelected) {
    hatSelected.dispatchEvent(calcEvent);
  }
  if (!!usbSelected) {
    usbSelected.dispatchEvent(calcEvent);
  }
  if (!!shirtSelected) {
    shirtSelected.dispatchEvent(calcEvent);
  }

  // this doesn't run after 0 seconds but makes it run after the dispatched events
  setTimeout((element) => {
    element.dispatchEvent(calcEvent);
  }, 0, box);

}

function allCalc(event) {
  // console.log('C:', calcItems, prices);
  const sum = baseValues.currentValue * calcItems.checkedCount;
  const priceAll = (parseFloat(sum.toFixed(4)) + prices.tshirtPrice + prices.hatPrice + prices.usbPrice);
  // console.log('All:', priceAll);
  //console.log(prices);
  document.querySelector('.c_final_price_1_kid').innerText = (parseFloat(sum.toFixed(4)) + prices.tshirtPrice + prices.hatPrice + prices.usbPrice);
}

function calculatePrice(event) {
  // console.log("Calc:", this.classList[0]);
  let calcV = parseFloat(event.target.dataset.calculate);

  if (this.classList.contains('shirt')) {
    // console.log("Calc Shirt:", this.classList[0], event.target.dataset.calculate);
    prices.tshirtPrice = calcV;
    //console.log(prices.tshirtPrice);
  }
  if (this.classList.contains('hat')) {
    prices.hatPrice = calcV;
  }
  if (this.classList.contains('usb')) {
    prices.usbPrice = calcV;
  }
  setTimeout((element) => {
    // console.log("Callback 1:do sum");
    element.dispatchEvent(calcEvent);
  }, 0, allCheckboxes[0]);
}

const calcEvent = new Event("calc");

allCheckboxes.forEach(elem => {
  elem.addEventListener("change", handleChange);
  elem.addEventListener("calc", allCalc);
});
usbCheckboxes.forEach(elem => {
  elem.addEventListener("change", handleRadioChange);
  elem.addEventListener("calc", calculatePrice);
});
hatCheckboxes.forEach(elem => {
  elem.addEventListener("change", handleRadioChange);
  elem.addEventListener("calc", calculatePrice);
});
tshirtCheckboxes.forEach(elem => {
  elem.addEventListener("change", handleRadioChange);
  elem.addEventListener("calc", calculatePrice);
});

<form id="form">
  <div class="weeks-container">
    <div class="c-checkbox-box">
      <label><span class="week-number">1</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
    <div class="c-checkbox-box">
      <label><span class="week-number">2</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
    <div class="c-checkbox-box">
      <label><span class="week-number">3</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
    <div class="c-checkbox-box">
      <label><span class="week-number">4</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
    <div class="c-checkbox-box">
      <label><span class="week-number">5</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
    <div class="c-checkbox-box">
      <label><span class="week-number">6</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
    <div class="c-checkbox-box">
      <label><span class="week-number">7</span>
      <input type="checkbox" class="c-week" data-calculate="99" /></label>
    </div>
  </div>

  <div class="shirts-container">
    <div class="shirt-checkbox-box">
      <span>TSHIRT</span>
      <input type="radio" name="c-equipement2" class="shirt c-tshirt-checkbox" data-calculate="0">
      <input type="radio" name="c-equipement2" class="shirt c-tshirt-checkbox" data-calculate="9">
      <input type="radio" name="c-equipement2" class="shirt c-tshirt-checkbox" data-calculate="9">
      <input type="radio" name="c-equipement2" class="shirt c-tshirt-checkbox" data-calculate="9">
    </div>
    <span>Hat</span>
    <input type="radio" name="c-equipement1" class="hat c-hat-checkbox" data-calculate="0">
    <input type="radio" name="c-equipement1" class="hat c-hat-checkbox" data-calculate="10">
    <input type="radio" name="c-equipement1" class="hat c-hat-checkbox" data-calculate="10">
    <input type="radio" name="c-equipement1" class="hat c-hat-checkbox" data-calculate="10">
  </div>
  <div class="equipment-container">
    <span>USB</span>
    <input type="radio" name="c-equipement3" class="usb c-usb-checkbox" data-calculate="0">
    <input type="radio" name="c-equipement3" class="usb c-usb-checkbox" data-calculate="17">
    <input type="radio" name="c-equipement3" class="usb c-usb-checkbox" data-calculate="17">
    <input type="radio" name="c-equipement3" class="usb c-usb-checkbox" data-calculate="17">
  </div>
</form>

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

Please signup or login to give your own answer.

Click here to cancel reply.