Vitor A. Vale

Recentemente me deparei com a necessidade de pegar os valores de vários itens selecionados pelo usuário em uma lista e submetê-los para processamento, resolvi então fazê-lo com jQuery utilizando tanto para a leitura dos dados quanto para o envio (AJAX). Numa rápida olhada na Internet pelo blog do Ashley Ford – PaperMashup.Com recomendo – encontrei este exemplo que utilizei.

Ele funciona basicamente com duas funções, uma que adiciona / remove a classe quando o checkbox é clicado e uma que quando o botão de envio é acionado percorre a função adicionando os valores dos elementos que possuírem a classe “ativada” (aplicada pela outra função) em um array para depois efetuar o processamento.

Veja um exemplo em ação aqui

O código

$(document).ready(function() {
 $("input").click(function () {
 $(this).toggleClass('selected');
 });

 $(".submit").click(function () {
 var itemsarray = [];
 $("#lista-itens li .selected").each(function () {
 var items = $(this).attr('value');
 itemsarray.push(items);
 });

 // Adicione o envio do processamento via AJAX

 });
});

O HTML

<ul id="lista-itens">
 <li><input type="checkbox" name="test[]" value="Valor" id="x_field"><label for="x_field">Valor</label></li>
</ul>
<a href="#" class="submit">ENVIAR</a>