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