Linking checkbox to image/booleen

Ask the community
,
1

Hi guys,

I want to have a page in my website where i check some boxes and some of the images dissapear. For example i want to show armchair images that are only green

I have a dataset setup with a booleen column.
I have linked the images to the dataset and that works
I have setup a checkbox and tried to link to the same dataset, booleen column but it doesnt work. I just wont tick.

any advice would be great!

Thanks!

2

I did this myself and here’s the screenshot:


I have a field in the collection called Boolean which as you can see is a Boolean field. I connect the checkbox to this field.

Is your field in the collection a Boolean ?

3

Thanks for the reply! It’s appriciated. Yes you are correct with the linking to collection and booleen. I did all that but it doesn’t work. The checkbox won’t tick. Try it.

4

@jon_sealey Did you set the dataset to Read-Write?

299×581 20.8 KB

5

@yisrael-wix I didn’t. I will try that and get back to you! Thanks so much for replying sir!

6

Ok the box now ticks great thanks! but whien i tick it some of the images should dissapear (the ones ticked in the dataset under booleen) but the dont. any thoughts?

7

In order for the checkbox value to be saved to the collection you need to use setFieldValue() .

You can use .hide() and .show() for the images based on the Boolean value.

8

@yisrael-wix thanks so much for this. I really dont know how to code so this may be way out of my league. I will defiantly give it a go and get back to you! Thanks again!

9

@jon_sealey Ya know something, I’m not sure I’m correct about this. Seems like the input of a checkbox should be available. Please post the editor URL of your site, I’d like to take a look. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

10

Sounds good to me: Take a look :

https://jonsealey.wixsite.com/specs/armchairs-all-all

11

OK, it’s like this, I completely misunderstood what you were trying to do, and you completely misunderstood how to do it.

First, disconnect the checkbox from the dataset. It’s isn’t needed and incorrect.

Then, you need to create an onChanged() event handler for the checkbox:


And then you need the onChange event handler itself:

export function checkbox1_change(event) {
   let checked = event.target.checked;
   $w("#dataset1").setFilter(wixData.filter()
        .eq("testBooleen", checked)
   );
}

Now, when you click on the checkbox you’ll see it changes the display based on the items in the collection that have Stackable (testBooleen) set to true.

You’ll have to dig a bit deeper into the Wix Code documentation to learn the basics. You can play with the examples to see how different types of code works:

Good luck and have fun.

12

This is completely awesome! I will try this And get back to you. GREAT!!! thanks so much!!!

13

Thanks for the above. I copy and pasted the code you wrote but it didn’t work for somde reason. please see attached image. Line 30 is wrong i think? any thoughts? I am going through all the links you sent also to see if they will help also. When it comes to actually writing the code i’m totally lost. Building and designing the site with the wix tools i find great. Hope you can help again and sorry to keep bothering you!

1600×900 350 KB

14

You have two problems that I see:

You need an import statement at the top of the file:
import wixData from ‘wix-data’;

Also, you have two checkbox1_change() functions in your code which causes an error message:


Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.

If you are going to work with code extensively in the product and not just the features in the user interface, you will need to familiarize yourself with basic coding concepts to accomplish what you want. We are happy to get you pointed in the right direction and get you started with what the code should look like, but you’ll need to take it from there.

I would suggest visiting the following sites for information on programming in Wix Code and Javascript:

Also, there are lots of examples that you can play with and learn from:

Best of luck and have fun!

15

Thanks again!

You are right.

I don’t really understand the code side of it only the user interface. To go any further than the user interface is a problem for me. Thanks so much for all the input. I will just have to find other ways to do this. Thanks!

16

Well, you were getting there. It was maybe just a “bit too much” for you. Take it slow and learn, and you’ll eventually get it.