lundi 27 mars 2023

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

I am creating a form and I would like to check if the checkboxes that are checked, if they are in a consecutive order. Meaning I would like to 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 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

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

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

      })
    });



Aucun commentaire:

Enregistrer un commentaire