How to sync the states of two identical checkboxes?

Design help Animations & Interactions
1

Hello dear people,

Is there a way to sync the states of two checkboxes in Webflow so that both visually reflect the same checked or unchecked state? The idea is to later hide one checkbox but still see the same results when unhiding the checkbox.

Bildschirm­foto 2023-01-01 um 18.02.18
Bildschirm­foto 2023-01-01 um 18.02.18786×1244 49.9 KB

Many thanks in advance!
Pajam

Here is my public share link: LINK
(how to access public share link)

2

Yes, you can keep them in sync with javascript.
Detect a change event on checkbox 1, and then update checkbox 2 to match.

3

Thanks for your great help! I’m not an expert in javascript but from what you suggested I tried this:

<script>
      const checkbox1 = document.querySelector('#checkbox1');
      const checkbox2 = document.querySelector('#checkbox2');

      checkbox1.addEventListener('change', () => {
        checkbox2.checked = checkbox1.checked;
      });
    </script>

Unfortunately it didn’t work out. What am I doing wrong?

4

Yep that’s basically right. Share your read-only site link, and your published site link where you have this implemented and I have have a look when I’m free.

5

https://preview.webflow.com/preview/abalaba?utm_medium=preview_link&utm_source=designer&utm_content=abalaba&preview=ddb975abf83c7774eef26dc349a71735&workflow=preview

I added a new extended javascript. Now the behavior is in sync but the visual properties are not.

@memetican Thanks for your time and help!

6
7

Hi @memetican

Thank you very much for the helpful video and explanation. I appreciate it a lot! I think you have pointed me in the right direction and now I need some time to figure out the solution.

Indeed, the basis of the checkbox was a component from Finsweet that I converted for my purposes. This is probably where I need to start, as you mentioned.

The end goals:

  • Different filter layouts for desktop and mobile, but for that they need to be synced.
  • I am trying out some layout options where the filter options reveal on hover (and close on hover-out), but can also be pinned to show permanently (eye icon). My understanding is that I will need two identical checkboxes for this.
  • Get a basic understanding of how I can pull checkbox selections from other sites in the future.

Again thanks a lot for your help. I’ll let you know if I need any more precious help from you.
Pajam

8

There are a lot of ways to change your layout for mobile. The approach you’re taking seems the most complex, since it requires you to script “synchronized” filter UIs.

Here are three alternatives;

USE CSS GRID LAYOUTS
Since they’re CSS-based, a manual CSS grid allows you to layout those elements in a very different way for your mobile view, without duplicating those elements.

SEPARATE THE DESKTOP & MOBILE PORTIONS OF THE LAYOUT
Duplicate that whole filter & results portion of the page, and then make one region desktop-only, and the other mobile-only. It will save you the scripting and give you unlimited creativity in your layout of both the filter portion, and the results.

MAKE TWO ENTIRELY SEPARATE PAGES
The nav would direct desktop users to the desktop version, and mobile users to the mobile version. Other than that, the sites would look and behave identically.