> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Filter symbols by toggling checkboxes
This examples demonstrates a technique for filtering symbols on a map when the user toggles a checkbox.
This technique creates four [symbol](https://docs.mapbox.com/style-spec/reference/layers/#symbol) layers that share a common [GeoJSON source](https://docs.mapbox.com/mapbox-gl-js/ja/api/sources/#geojsonsource). Each layer includes a [`filter`](https://docs.mapbox.com/style-spec/reference/layers/#filter) property so that it will only show one type of feature from the source based its `icon` property (For example the `poi-theatre` layer will only show features where the value of the `icon` property is `'theatre'`)
When a checkbox is toggled, [`setLayoutProperty`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#setlayoutproperty) is called to toggle the visibility of the respective layer.
An alternative technique using a single layer and [`map.setFilter`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#setfilter) is available at [Filter symbols using a dynamic expression](https://docs.mapbox.com/mapbox-gl-js/ja/example/filter-symbols-expression/)
> **Note: Referencing images in a style's sprite**
>
> This example uses the [Mapbox Light](https://www.mapbox.com/maps/light/) style. The `icon-image` used in this example comes from the Mapbox Light style's [sprite](https://docs.mapbox.com/help/glossary/sprite/).
>
> To view all available images in a style's sprite or add additional images, open the style in [Mapbox Studio](https://studio.mapbox.com/styles/) and click the **Images** tab. To add a new image to the style at runtime see the [Add an icon to the map](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/example/add-image/) example.
> Example code:
**JavaScript**
```html
Filter symbols by toggling checkboxes
```