Feedback: Customize form checkboxes and radio buttons

Community resources Product feedback
21

Is there any progress on this issue?
I’m trying to pre-select custom radio buttons and checkboxes with custom code but they simply wont be checked using:
$(‘#checkBox’).prop(‘checked’, true);
works just fine with the default.

1 Like
22

Hey, when will this be available for Ecommerce checkout? Cant do anything to the radio buttons In the shipping section.

1 Like
23

Hey, I am wondering if there is a way to set a radio button to add a fill color to the textbox or div that it is in when in the checked state and then remove the fill when it is not checked. I can only seem to style the radio itself but nothing else when it is checked. Please let me know if there is something I can do. Thanks!
Here is my site (the Designs > Interiors page): https://beaber-construction-llc.webflow.io/designs/interior-designs

24

I am having the same issue.
Any update on this?

25

I’m having the same issue. Trying every which way I can in both the UI and javascript to get a custom radio option pre-selected on the page (and ideally trigger the associated transitions).

Maybe there’s some way to simulate a click in javascript after the page loads?

Here’s my site.

26

I was having the same issue. It seems that when you choose the “custom” styling of the radio and checkbox buttons, they “hide” the input element and add a div as a sibling with all the styling that you add to your button. To make this work, they probably added a listener that toggles “checked” to the actual input whenever you click on the radio or checkbox buttons and also toggles a class to the div to show the current state of the button.
This means that if you use $('#checkBox').prop('checked', true);, it will throw it out of sync unless you also add or remove the class they use to add the styling.

So to check the checkbox:

$('#checkBox').prop('checked', true);
$('#checkBox').siblings("div.checkbox").addClass("w--redirected-checked");

To uncheck it:

$('#checkBox').prop('checked', false);
$('#checkBox').siblings("div.checkbox").removeClass("w--redirected-checked");

And similar for the radio buttons:

$('#radio-yes').prop('checked', true);
$('#radio-yes').siblings("div.radio").addClass("w--redirected-checked");

I hope this helps