Checklist

Checklist

HTML

<!-- checklist -->
<ul class="list-check">
    <li><input id="check-1" name="check" type="checkbox"/>
    <label for="check-1">O incentivo ao avanço tecnológico. </label>
</li>
    <li><input id="check-2" name="check" type="checkbox"/>
    <label for="check-2">O incentivo ao avanço tecnológico. </label>
</li>
    <li><input id="check-3" name="check" type="checkbox"/>
    <label for="check-3">O incentivo ao avanço tecnológico. </label>
</li>
</ul>
<!-- /checklist -->

CSS

/* CSS reset */
* { margin: 0;  padding: 0; list-style: none; border: 0;  text-decoration: none;
}

body {
    
    font: normal 100% Helvetica, Arial, sans-serif;
    
}

label {
    font-family: verdana;
    font-size: 0.75em;     /* 12px(tamanho da fonte desejada) / 16px(tamanho padrão da fonte do navegador em geral) = 0.75em */
}

input, label {vertical-align: middle;}

/* fixing firefox bug */
div:after, ol:after, li:after, form:after, ul:after, dl:after,q:after {content:".";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}

.list-check li {
border-bottom:1px solid #fff;
padding:10px;
color:#000;
background-color:#f7f7f4;
}
.list-check li {background-color:#f7f7f4;}
.list-check li:hover {background-color:#e3e3dc;}
.list-check li label {
cursor:pointer;
color:#333;
    /*
font-size:1.2em;
line-height:1.3em;
    */
}
.list-check li:hover label {color:#000;}
.list-check input[type="checkbox"], .multi-column-check input[type="checkbox"] {cursor:pointer;margin-right:5px;}
.list-check li.checked {background: #e5f8ce url(../img/ico-check.png) no-repeat 10px center;padding-left:32px;}
.list-check .checked input[type="checkbox"] {display: none;}
.list-check li.checked:hover input[type="checkbox"] {display: inline !important;}
.list-check li.checked:hover{background: #e5f8ce none !important;padding-left:10px;}

JavaScript

$(document).ready(function() {
    //reconhecendo o checkbox e ativando a li
    $(".list-check").find(":checked").parent().toggleClass("checked");
    $(".list-check").find(":disabled").parent().toggleClass("disabled");
    $(".list-check :checkbox").click(function () {
        $(this).parent().toggleClass("checked");
    });
});