JSFiddle - React, Tailwind, and code Playground

by tejek

HTML

<input id="chkbox" type="checkbox" name="delete" value="1" class="checkbox" required="required">
<label id="etykietka" for="chkbox" class="etykieta">Potwierdzam usunięcie konta</label>

CSS

.checkbox{
    display:none;
}
.etykieta{
    background: url("http://tozobacze.biznesport.com.pl/js/jqtransformplugin/img/checkbox.gif") no-repeat left top;
    padding-left: 35px;
    padding-top: 3px;
    margin: 5px;
    height: 16px;
    width: 300px;
    display: block;
}
.etykieta:hover {
    text-decoration: none;
}
.etykieta_wybrana {
    background: url("http://tozobacze.biznesport.com.pl/js/jqtransformplugin/img/checkbox.gif") no-repeat left bottom;
}

JavaScript

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });