I have a page that uses a basic bootstrap based Admin BSB Material Design [layout](https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Core)

I am having difficulty getting a value from the checkboxes in this design.

Example checkbox that is 'checked':

[![enter image description here](https://i.stack.imgur.com/MSpMh.png)](https://i.stack.imgur.com/MSpMh.png)

[![enter image description here](https://i.stack.imgur.com/gwDG4.png)](https://i.stack.imgur.com/gwDG4.png)

I am seeing cypress having no luck finding the checkbox control even if i add a `data-cypress="mycheckbx"` attribute.

So my questions is: how do I obtain the 'checked' property in this scenario?

Styles Used:

```
[type="checkbox"].filled-in:not(:checked)+label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    transform-origin: 100% 100%
}

[type="checkbox"].filled-in:not(:checked)+label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0;
    z-index: 0
}

[type="checkbox"].filled-in:checked+label:before {
    top: 0;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type="checkbox"].filled-in:checked+label:after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #26a69a;
    background-color: #26a69a;
    z-index: 0
}

```