por Ivan da Silveira

Marcar/Desmarcar todos os checkboxs usando jQuery

Marcar/Desmarcar todos os checkboxs das linhas de uma tabela através de um checkbox de controle usando jQuery.
 

<!-- Código HTML: -->
<table>
	<tr>
		<th>
			<input type="checkbox" />
		</th>
		<th>
			Col 1
		</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox" />
		</td>
		<td>
			Col 1
		</td>
	</tr>
</table>
//Código jQuery:
// adiciona evento de clique a todos os checkboxs contidos entre <th></th>
$("th input[type='checkbox']").click(function () {
	// pega o indice da '<th>' a que este checkbox é filho
	var thIndex = $(this).parent().index();
	// se o checkbox de controle('<th>') foi 'marcado' no clique
	if ($(this).is(":checked")) {
		// sobe até o nivel da tag '<table>' e pesquisa pelos checkbox contidos na mesma coluna do checkbox de controle e adiciona o atributo de 'marcação'
		$(this).parent().parent().parent().children().find("td:eq(" + thIndex + ") input[type='checkbox']").attr("checked", "checked");
	} else { // se ao clicar no checkbox de controle('<th>') foi desmarcado
		// sobe até o nivel da tag '<table>' e pesquisa pelos checkbox contidos na mesma coluna do checkbox de controle e remove o atributo de 'marcarção'
		$(this).parent().parent().parent().children().find("td:eq(" + thIndex + ") input[type='checkbox']").removeAttr("checked");
	}
});

// adiciona evento de clique a todos os checkboxs contidos entre <td></td>
$("td input[type='checkbox']").click(function () {
	// pega o indice da '<td>' a que este checkbox é filho
	var tdIndex = $(this).parent().index();
	// se o checkbox ('<td>') foi 'marcado' no clique
	if (!$(this).is(":checked")) {
		$(this).parent().parent().parent().children().find("th:eq(" + tdIndex + ") input[type='checkbox']").removeAttr("checked");
	} else { // se ao clicar no checkbox ('<td>') foi desmarcado
		// quantidade total de '<td>' descontando a '<th>'(children().length - 1)
		var maxtds = $(this).parent().parent().parent().children().length - 1;
		// quantidade total de checkboxs marcados na mesma coluna do que foi clicado
        var checkedtds = $(this).parent().parent().parent().children().find("td:eq(" + tdIndex + ") input[type='checkbox']:checked").length;
		// se a quantidade de checkbox marcados é igual a quantidade total de checkbox na coluna então é marcado o checkbox de controle
		if (maxtds == checkedtds) {
			$(this).parent().parent().parent().children().find("th:eq(" + tdIndex + ") input[type='checkbox']").attr("checked", "checked");
		}
	}
});


 

Comentários

Carregando comentários

Postar um novo comentário



Processando...