Getting the checked value of a checkbox - Material Design

Question

I have a page that uses a basic bootstrap based Admin BSB Material Design layout

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

Example checkbox that is 'checked':

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
}

Answer 1

Since none of the solutions above worked for me, I did this :

cy.get('#element').should('be.checked')

source : cypress documentation

The opposite (unchecked) assertion would be (see the official docs):

cy.get('#element').should('not.be.checked')