title: Getting the checked value of a checkbox - Material Design
body: <p>I have a page that uses a basic bootstrap based Admin BSB Material Design <a href="https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Core" rel="noreferrer">layout</a></p>
  
  <p>I am having difficulty getting a value from the checkboxes in this design.</p>
  
  <p>Example checkbox that is 'checked':</p>
  
  <p><a href="https://i.stack.imgur.com/MSpMh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MSpMh.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/gwDG4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gwDG4.png" alt="enter image description here"></a></p>
  
  <p>I am seeing cypress having no luck finding the checkbox control even if i add a <code>data-cypress="mycheckbx"</code> attribute.</p>
  
  <p>So my questions is: how do I obtain the 'checked' property in this scenario?</p>
  
  <p>Styles Used:</p>
  
  <pre><code>[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
  }
  </code></pre>