Checkbox Path Filter Control

Checkbox path filter control is used to filter content by the defined path value at the specified CSS selector path.

See the Pen jPList Checkbox Path Filter Control by 1rosehip (@1rosehip) on CodePen.

HTML Structure

Checkbox path filter control is defined by required data-jplist-control="checkbox-path-filter" data attribute. The data-group attribute defines group of elements that should be filtered. The full list of data attributes can be found here.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="path/css" />
                
<!-- checkbox path filter control -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        checked />
    Filter by .title
</label>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 2</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 3</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Top and bottom panels

Checkbox path filter control can be placed in both top and bottom panels for the better user experience. In this case data-name attribute with the same value should be added. All other data attributes should also have the same values:

<!-- checkbox path filter control in the top panel -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        checked />
    Filter by .title
</label>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 2</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 3</div>
        ....
    </div>

</div>

<!-- checkbox path filter control in the bottom panel -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        checked/>
    Filter by .title
</label>

Jump to top

data-jump data attribute can be used to scroll page to the specified location when user changes checkbox value. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.

<label>
    <input
        data-jplist-control="checkbox-path-filter"
        data-jump="top"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        checked />
    Filter by .title
</label>

Deep Linking

Deep links can be used to keep user changes and control state after the page refresh. To implement them data-id attribute should be added to HTML structure and deepLinking setting should be true in jPList parameters.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="path/css" />

<!-- checkbox path filter control -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        data-id="title1"
        checked />
    Filter by .title
</label>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        deepLinking: true
    });
</script>

Storage

Local storage, session storage or cookies can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and storage setting should be passed to jPList constructor.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="path/css" />

<!-- checkbox path filter control -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        data-id="title1"
        checked />
    Filter by .title
</label>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        storage: 'localStorage', //'localStorage', 'sessionStorage' or 'cookies'
        storageName: 'jplist'
    });
</script>

Data Attributes

The full list of control data attributes.

Name	Description	Values
`data-jplist-control`	Defines checkbox path filter control.	"checkbox-path-filter"
`data-group`	Defines group of items that should be filtered. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute.	any path value
`data-name`	The data-name attribute is used to identify the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value.	any path value
`data-path`	CSS selector that defines the HTML element that should be filtered	"default" keyword for the initial value or any CSS selector
`data-path`	the filter path value	any path value
`data-jump`	This data attribute can be used to scroll page to the specified location when user changes a checkbox value. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.	top keyword or any CSS selector
`data-id`	This attribute is used for deep linking.	any path value that may contain letters, digits, underscores or dashes
`data-or`	Defines a group of controls that should be filtered though the "OR" logic	any text value, for example data-or="bags"