Hi there
is it possible to change the state of a checbox with custom styling?
I have 2 checkboxes, both can’t be unchecked. i have a custom code for it and it works except the styling when its checked or not.
Dennis
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
If I understand you correctly, you have created and styled two checkboxes with custom code and now they cannot be unchecked?
I don’t know your design, but maybe you will not need custom code for this.
Do you know the custom style option from Webflow’s native checkbox field?
With this you can style checkboxes directly in Webflow, without custom code. This way the checkbox should still work after adding your styles.
hi,
I did this, and i use custom code so i cant uncheck 2 checkboxes. when i use a standard checkbox the states are correct. when i use a custom style the styles are not following the states.
Check the movie:
when the checkbox is checked it should have the colored shadow. but when i do uncheck 1 checkbox the other will be checked but does not get the colored shadow.
my code:
// Initialize total
const subscriptionItems = [];
const featuresItems = [];
let totalValue = 0;
let total = 0;
let items = ds.store['subscriptions'].data;
let features = ds.store['pricing-features'].data;
let evValue = 0;
let batteryValue = 1; // Declare the batteryValue variable
// Import checkbox and text element info in script
const checkbox_1 = document.getElementById('input-checkbox-battery');
const checkboxText_1 = document.getElementById('Checkbox-control-battery');
const checkbox_2 = document.getElementById('input-checkbox-ev');
const checkboxText_2 = document.getElementById('Checkbox-control-ev');
// Function to calculate and update total value
function updateTotalValue() {
// Update text element based on batteryValue
if (batteryValue === 1) {
checkboxText_1.textContent = "aansturen";
} else {
checkboxText_1.textContent = "Niet aansturen";
}
// Update text element based on evValue
if (evValue === 1) {
checkboxText_2.textContent = "aansturen";
} else {
checkboxText_2.textContent = "Niet aansturen";
}
// Calculate total value
totalValue = calculateTotalValue(batteryValue, evValue, subscriptionItems, featuresItems);
// Update total value element
updateTotalValueElement(totalValue);
}
// Add event listeners to checkboxes
if (checkbox_1 && checkbox_2 && checkboxText_1) {
checkbox_1.addEventListener('change', function() {
batteryValue = checkbox_1.checked ? 1 : 0;
if (batteryValue === 0 && evValue === 0) {
evValue = 1;
checkbox_2.checked = true;
}
updateTotalValue();
});
checkbox_2.addEventListener('change', function() {
evValue = checkbox_2.checked ? 1 : 0;
if (evValue === 0 && batteryValue === 0) {
batteryValue = 1;
checkbox_1.checked = true;
}
updateTotalValue();
});
}
// Initialize default values and calculate total on page load
window.addEventListener('load', function() {
//checkbox_1.checked = true; // Check the battery checkbox by default
updateTotalValue(); // Calculate and update the total value
});
I also tried to use the checkbox_1.classList.add(‘w–redirected-checked’)
It seems that it does not work.
// Add event listeners to checkboxes
if (checkbox_1 && checkbox_2 && checkboxText_1) {
checkbox_1.addEventListener('change', function() {
batteryValue = checkbox_1.checked ? 1 : 0;
if (batteryValue === 0 && evValue === 0) {
evValue = 1;
checkbox_2.checked = true;
checkbox_1.classList.add('w--redirected-checked'); // Add the 'w--redirected-checked' class
} else {
checkbox_1.classList.remove('w--redirected-checked'); // Remove the 'w--redirected-checked' class
}
updateTotalValue();
});
checkbox_2.addEventListener('change', function() {
evValue = checkbox_2.checked ? 1 : 0;
if (evValue === 0 && batteryValue === 0) {
batteryValue = 1;
checkbox_1.checked = true;
checkbox_2.classList.add('w--redirected-checked'); // Add the 'w--redirected-checked' class
} else {
checkbox_2.classList.remove('w--redirected-checked'); // Remove the 'w--redirected-checked' class
}
updateTotalValue();
});
}
It’s been awhile since I’ve needed to do this-
IIRC when you use custom styled checkboxes there are a few classes you need to manipulate to reflect the state change. Some on the label, some on the checkbox, perhaps some on the containing DIV.
You’ll need to check the emitted code on your published site to see what’s needed.
I think one approach I’ve used at one point is to select the label element and click() it so that Webflow.js updates both the state and the checked value in sync with each other.
Do you mean update the value of the label in js? I’m completely confused that its so difficult to make the checkbox act normally.
The basic problem is that browsers don’t like to style checkboxes. It’s just not a feature.
To get around that, designers hide the checkbox, and style the label element instead.
That complicates everything.
Webflow has some built-in support for this, but you can see how the basic approach is just messy when you’re trying to manipulate the checkbox in JS.
The checkbox itself stores the value, and defines what’s submitted in the form.
But the label acts as the indicator, and that indication is controlled by classes that have nothing to do with the checkbox state.
So you have to deal with both- the checkbox checked state, and the label classes.
Look at the HTML generated by Webflow when the checkbox is checked, and when it’s not, and you’ll see exactly what your script needs to do.
I there a simple way to eplain this, i have just basic knowledge of javascript.
this is my url:
thank you in advance for the help.
Dennis
previousSibling did the trick.