design/assets/js/checkboxBetter.js
2024-11-06 12:31:56 +02:00

53 lines
1.9 KiB
JavaScript

document.addEventListener('DOMContentLoaded', function() {
// Function to update the parent class based on the checkbox/radio state
function updateParentClass(element) {
const parent = element.closest('.checkboxWrapper');
if (parent) {
if (element.checked) {
if (parent.classList.contains('checkboxWrapperFancy')) {
parent.classList.add('checkboxWrapperFancyActive');
}
} else {
if (parent.classList.contains('checkboxWrapperFancyActive')) {
parent.classList.remove('checkboxWrapperFancyActive');
}
}
}
}
// Function to handle radio button toggling
function handleRadioToggle(radio) {
const parent = radio.closest('.checkboxWrapper');
const radios = document.querySelectorAll('input.checkboxWrapperCheckRadio');
radios.forEach(r => {
const parentRadio = r.closest('.checkboxWrapper');
if (parentRadio && r !== radio) {
if (parentRadio.classList.contains('checkboxWrapperFancyActive')) {
parentRadio.classList.remove('checkboxWrapperFancyActive');
}
}
});
updateParentClass(radio);
}
// Select all checkboxes and radio buttons
const checkboxes = document.querySelectorAll('input.checkboxWrapperCheck[type="checkbox"]');
const radios = document.querySelectorAll('input.checkboxWrapperCheckRadio[type="radio"]');
// Add event listeners for checkboxes
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
updateParentClass(this);
});
});
// Add event listeners for radio buttons
radios.forEach(radio => {
radio.addEventListener('change', function() {
handleRadioToggle(this);
});
});
});