No artigo de hoje, vamos ver como é simples criar uma lista de checkbox (checklist) mais amigável, privilegiando a usabilidade e sem prejudicar o HTML e influenciar na acessibilidade da mesma. Tudo isso através de xHTML, CSS e jQuery.

Esse protótipo foi idealizado, inicialmente, pelo meu amigo designer Marcello Manso, que trabalhou comigo na Petrobrás. A ideia é transformar um checklist comum em algo mais elaborado, como no exemplo abaixo:

HTML do checklist

Não coloquei no CSS a marcação de form, fieldset, nem legend, pois o checklist geralmente é inserido dentro de um pedaço de formulário. Então, vou trabalhar como se você já tivesse criado essas tags iniciais de formulário, ok?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link href="css/checklist.css" rel="stylesheet" media="all" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/effects.js"></script>

<!-- 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, assim como a contínua expansão de nossa atividade exige a precisão e a definição do sistema de participação geral. No mundo atual, o consenso sobre a necessidade de qualificação apresenta . </label>
</li>
<li><input id="check-2" name="check" type="checkbox">
<label for="check-2">O incentivo ao avanço tecnológico, assim como a contínua expansão de nossa atividade exige a precisão e a definição do sistema de participação geral. No mundo atual, o consenso sobre a necessidade de qualificação apresenta . </label>
</li>
<li><input id="check-3" name="check" type="checkbox">
<label for="check-3">O incentivo ao avanço tecnológico, assim como a contínua expansão de nossa atividade exige a precisão e a definição do sistema de participação geral. No mundo atual, o consenso sobre a necessidade de qualificação apresenta . </label>
</li>
</ul>
<!-- /checklist -->

Vamos ao nosso CSS

/* CSS reset */
* { margin: 0;  padding: 0; list-style: none; border: 0;  text-decoration: none;}
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;}

Vamos para a mágica do jQuery, finalizando a trama

$(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");
});
});