In general, there is such a code

.button { background: url(http://imgur.com/OqeWzGn.png) -143px -38px; background-repeat: no-repeat; display: inline-block; width: 14px; height: 14px; cursor: pointer; } .checked { background-position: -161px -38px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="sde" class="button" onclick="$(this).toggleClass('checked')"></label> <input type="checkbox" name="asd" id="sde">

Edge input is behind label. And sometimes it turns out that on label checked , but not on input. And the rest is fine

  • And how is the event checked and how is it connected css. Because of the presented code is not clear. - NeedHate
  • I would like to checkbox checked then the label has the class .checked - ishidex2
  • 2
    Maybe it makes sense to use the css construction of type input: checked + label {}. Then you can hang your style, which, for example, is used in the class .checked. - NeedHate
  • `input: checked + label {}` - ishidex2 doesn't work
  • Because in the html structure, the input should be above the label :) - NeedHate

2 answers 2

 .button { background: url(http://imgur.com/OqeWzGn.png) -143px -38px; background-repeat: no-repeat; display: inline-block; width: 14px; height: 14px; cursor: pointer; } input:checked ~ label{ background-position: -161px -38px; } 
 <input type="checkbox" name="asd" id="sde"> <label for="sde" class="button" ></label>

  • By the way, in this answer in IE, the daw at the label is shown faster. - Alex78191

You can do it without the for attribute. IE incorrectly handles multiple clicks on checkbox.

 .button { background: url(http://imgur.com/OqeWzGn.png) -143px -38px; background-repeat: no-repeat; display: inline-block; width: 14px; height: 14px; cursor: pointer; } .checked { background-position: -161px -38px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="button" onclick="$(this).toggleClass('checked'); $('#sde').prop('checked', !$('#sde').prop('checked'))"></label> <input type="checkbox" name="asd" id="sde">

  • And why for id [0]? - ishidex2
  • @Duoxx to get the item - Alex78191
  • Emm id is unique if that - ishidex2
  • The @Duoxx function $('') returns a non-HTML element. - Alex78191
  • @Duoxx rewrote on Vanilla jQuery. - Alex78191