# Checklist Beginner

**URL:** <https://forum.wixstudio.com/t/checklist-beginner/42228>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [August 10, 2020, 11:47pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228 "2020-08-10T23:47:26Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mordyeps](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mordyeps/32/10852_2.png) [@mordyeps](https://forum.wixstudio.com/u/mordyeps)\
**Post date:** [August 10, 2020, 11:47pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/1 "2020-08-10T23:47:26Z")

</div>

I want to filter data shown with checkboxes. With the ability to have multiple selections at once. I have a repeater showing data from a database. I know code but don’t know where to start.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 11, 2020, 12:21am UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/2 "2020-08-11T00:21:06Z")

</div>

You know the CODE but do not know where to start very strange statement😁

Where to start?

1. First creating and designing your form.

2. Inserting and implementing all element-functions.

3. Write some code.

4. How to work with checkboxes…  
(i don’t have real corresponding example to this case, but similar ones, which could help to understand how to work with this element…  
[https://russian-dima.wixsite.com/meinewebsite/blank-13](https://russian-dima.wixsite.com/meinewebsite/blank-13)

and here…  
[https://russian-dima.wixsite.com/meinewebsite/blank-13](https://russian-dima.wixsite.com/meinewebsite/blank-13)

1. How to work with Filter…  
[https://russian-dima.wixsite.com/meinewebsite/blank-3](https://russian-dima.wixsite.com/meinewebsite/blank-3)

2. And how to work with repeater, but this step will be your last one.  
First do the first and sexond step.

---

<div class="post-metadata">

**Author:** ![mordyeps](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mordyeps/32/10852_2.png) [@mordyeps](https://forum.wixstudio.com/u/mordyeps)\
**Post date:** [August 11, 2020, 1:12pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/3 "2020-08-11T13:12:06Z")

</div>

I have my checkboxes set up, I just don’t know the code to make them work. I have items I need to filter only when their checkbox is selected. I’m not sure what those examples you provided are for…

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 11, 2020, 3:31pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/4 "2020-08-11T15:31:03Z")

</div>

@mordyeps

> I’m not sure what those examples you provided are for…  
> I thought, you wanted to filter something?  
> One of my examples show you how to work with the filter.

> I have items I need to filter only when their checkbox is selected  
> The other examples shows how to work with checkboxes.

You have to combine the both methods to get your aim.  
You can also take a look into the CORVID-API, if my examples do not help you.

[https://www.wix.com/corvid/reference/api-overview/introduction](https://www.wix.com/corvid/reference/api-overview/introduction)

[https://www.wix.com/corvid/reference/$w/checkbox](https://www.wix.com/corvid/reference/$w/checkbox)

[https://www.wix.com/corvid/reference/wix-data/filter](https://www.wix.com/corvid/reference/wix-data/filter)

---

<div class="post-metadata">

**Author:** ![mordyeps](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mordyeps/32/10852_2.png) [@mordyeps](https://forum.wixstudio.com/u/mordyeps)\
**Post date:** [August 11, 2020, 3:56pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/5 "2020-08-11T15:56:41Z")

</div>

@russian-dima I am trying to filter my dataset using checkboxes, not a dropdown. I need to filter out certain items based on the value selected in the checkbox. I believe you were using a dropdown for that.

---

<div class="post-metadata">

**Author:** ![mordyeps](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mordyeps/32/10852_2.png) [@mordyeps](https://forum.wixstudio.com/u/mordyeps)\
**Post date:** [August 11, 2020, 4:00pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/6 "2020-08-11T16:00:42Z")

</div>

@russian-dima

 ![](https://us1.discourse-cdn.com/wix/original/3X/f/0/f05cac7288eb0e950ee09db7c581065e0a45d4c7.jpeg)  
This is what I’m working with. I was using a dropdown but want multiple collections to viewed at once. For example, if I only want to view the Austin and Indi collections. This is a dynamic page with a repeater connected to a dataset.

---

<div class="post-metadata">

**Author:** ![lmeyer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lmeyer/32/18166_2.png) [@lmeyer](https://forum.wixstudio.com/u/lmeyer)\
**Post date:** [August 11, 2020, 4:01pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/7 "2020-08-11T16:01:02Z")

</div>

There are a lot of resources for this on the forum! Here are a few I found that should be useful to you.

[https://www.wix.com/corvid/forum/tips-tutorials-examples/example-multiple-groups-filter](https://www.wix.com/corvid/forum/tips-tutorials-examples/example-multiple-groups-filter)

[https://www.wix.com/corvid/forum/community-discussion/solved-multiple-group-check-boxes-to-filter-a-dataset-and-filter-update-a-drop-down](https://www.wix.com/corvid/forum/community-discussion/solved-multiple-group-check-boxes-to-filter-a-dataset-and-filter-update-a-drop-down)

[https://www.wix.com/corvid/example/mega-search](https://www.wix.com/corvid/example/mega-search)

---

<div class="post-metadata">

**Author:** ![mordyeps](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mordyeps/32/10852_2.png) [@mordyeps](https://forum.wixstudio.com/u/mordyeps)\
**Post date:** [August 11, 2020, 5:17pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/8 "2020-08-11T17:17:50Z")

</div>

This is great! Thanks! Unfortunately its not working as expected.

```javascript
$w("#checkboxCollection").onChange( (event, $w) => {
      filterView();
    });

    $w("#checkboxRoom").onChange( (event, $w) => {
      filterView();
    });
    
    
    
 function filterView(){
 var collectionFilter = $w("#checkboxCollection").value
 var roomFilter = $w("#checkboxRoom").value
 
    console.log('collection', collectionFilter);
    console.log('room', roomFilter);
 
    $w("#dataset1").setFilter( wixData.filter()
    .hasSome("Collection", collectionFilter)
    .hasSome("Room", roomFilter)
    )

```

This is my modified code, any idea why it wouldn’t work? Here’s a screenshot for context:

 ![](https://us1.discourse-cdn.com/wix/original/3X/c/6/c6512de85b9728bafe9317c270cf7712bb06ca12.jpeg)

---

<div class="post-metadata">

**Author:** ![lmeyer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lmeyer/32/18166_2.png) [@lmeyer](https://forum.wixstudio.com/u/lmeyer)\
**Post date:** [August 11, 2020, 5:45pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/9 "2020-08-11T17:45:18Z")

</div>

@mordyeps Is this the full code you have for the page? If you’re following [this example](https://www.wix.com/corvid/forum/tips-tutorials-examples/example-multiple-groups-filter) you’re missing some key elements, such as the **.then()** and importing the **wix-data** module.

This is the full example code that you should modify to your element IDs:

```javascript
import wixData from 'wix-data';

$w.onReady(function () {
    filterView();

    $w("#checkboxGroup1").onChange( (event, $w) => {
      filterView();
    });

    $w("#checkboxGroup2").onChange( (event, $w) => {
      filterView();
    });
});

function filterView(){
 var typeFilter = $w("#checkboxGroup1").value
 var lightFilter = $w("#checkboxGroup2").value
 
    console.log('type', typeFilter);
    console.log('light', lightFilter);
 
    $w("#dataset1").setFilter( wixData.filter()
    .hasSome("type", typeFilter)
    .hasSome("light", lightFilter)
    )

    .then( () => {
 let count = $w("#dataset1").getTotalCount(); 
 if(count === 0){
                $w("#group1").show();
            }else{
                $w("#group1").hide();
            }
    } )
    .catch( (err) => {
    console.log(err);
    } );
}

```

---

<div class="post-metadata">

**Author:** ![mordyeps](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mordyeps/32/10852_2.png) [@mordyeps](https://forum.wixstudio.com/u/mordyeps)\
**Post date:** [August 11, 2020, 5:50pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/10 "2020-08-11T17:50:18Z")

</div>

@lmeyer Well, my full code includes other page elements. I’ll provide it and try to use the previous code.

```javascript
import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {

 let mode = $w("#mainMedia").fitMode; // "fixedWidth"
    $w("#mainMedia").fitMode = "fit";

    filterView();

    $w("#checkboxCollection").onChange( (event, $w) => {
      filterView();
    });

    $w("#checkboxRoom").onChange( (event, $w) => {
      filterView();
    });
});

export function container1_viewportEnter(event) {
 if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
 if($w("#title").hidden){
      $w("#title").show();
    }
  } 
}

let slideOptions = {
 "duration": 100,
 "delay": 50,
 "direction": "top"
};

let fadeOptions = {
 "duration": 500,
 "delay": 20
};

export function container1_mouseIn(event) {
 let $repeaterData = $w.at(event.context);
    $repeaterData('#title').show("slide", slideOptions);
}

export function container1_mouseOut(event) {
 let $repeaterData = $w.at(event.context);
    $repeaterData('#title').hide("fade", fadeOptions);
}

export function loadingstrip_viewportEnter(event) {
     $w("#loadinggif").show(); //This is your GIF or animated image
    $w("#dataset1").loadMore() //This is your dataset
  .then(() => {
   $w("#loadinggif").hide(); //This is your GIF or animated image

   console.log("Done loading more data");
  });
}

function filterView(){
 var collectionFilter = $w("#checkboxCollection").value
 var roomFilter = $w("#checkboxRoom").value
 
    console.log('collection', collectionFilter);
    console.log('room', roomFilter);
 
    $w("#dataset1").setFilter( wixData.filter()
    .hasSome("Collection", collectionFilter)
    .hasSome("Room", roomFilter)
    )

    .then( () => {
 let count = $w("#dataset1").getTotalCount(); 
 if(count === 0){
                $w("#group1").show();
            }else{
                $w("#group1").hide();
            }
    } )
    .catch( (err) => {
    console.log(err);
    } );
}

```

---

<div class="post-metadata">

**Author:** ![lmeyer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lmeyer/32/18166_2.png) [@lmeyer](https://forum.wixstudio.com/u/lmeyer)\
**Post date:** [August 11, 2020, 6:03pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/11 "2020-08-11T18:03:35Z")

</div>

@mordyeps Makes sense! I would double check:

1. That the database Field Keys in this section (“Collection” and “Room”) are **exactly** as they appear in your database, with matching capitalization (example, _“Collection”_ and _“collection”_ are seen as different)

```javascript
$w("#dataset1").setFilter( wixData.filter()
    .hasSome("Collection", collectionFilter)
    .hasSome("Room", roomFilter)
    )

```

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/0/3031f9788b769a52e10bb3afd47ecad3bc12e368.png)

1. All the element IDs. The example includes the element “#group1” which is an error message, is that how it is on your page?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 11, 2020, 6:58pm UTC](https://forum.wixstudio.com/t/checklist-beginner/42228/12 "2020-08-11T18:58:50Z")

</div>

@mordyeps

Is this what you wanted to do?  
[https://russian-dima.wixsite.com/meinewebsite/checkbox-filter](https://russian-dima.wixsite.com/meinewebsite/checkbox-filter)

```javascript
import wixData from 'wix-data';

$w.onReady(function () {
    $w("#checkboxCollection").onChange(() => {filterView();});
    $w("#checkboxRoom").onChange( (event, $w) => {filterView();});
});
 
 function filterView(){
 let collection = $w("#checkboxCollection").value
 let room = $w("#checkboxRoom").value

    console.log('collection', collection);
    console.log('room', room);
 
    $w("#dataset1").setFilter( wixData.filter()
        .hasSome("collection", collection)
        .hasSome("room", room)
    )

    .then( () => {let count = $w("#dataset1").getTotalCount();})
    .catch( (err) => {
    console.log(err);
    } );
 }

```

Now you have an example 😁