Aprenda a marcar vários checkbox de uma só vez

Olá pessoal! No post de hoje vou mostrar pra vocês uma maneira bem prática e simples de se criar um mecanismo para marcar/desmarcar todos os checkboxes em uma lista ou tabela html.

Esse processo é importante quando queremos aplicar uma determinada ação em vários registros de uma só vez. Todos os serviços de webmail, orkut e o próprio wordpress usam isso.

Faremos o processo de marcar/desmarcar todos os componentes checkbox através de funções javascript. Portanto, vamos criar o arquivo checkbox.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function verificaStatus(nome){
	if(nome.form.tudo.checked == 0)
		{
			nome.form.tudo.checked = 1;
			marcarTodos(nome);
		}
	else
		{
			nome.form.tudo.checked = 0;
			desmarcarTodos(nome);
		}
}
 
function marcarTodos(nome){
   for (i=0;i<nome.form.elements.length;i++)
	  if(nome.form.elements[i].type == "checkbox")
		 nome.form.elements[i].checked=1
}
 
function desmarcarTodos(nome){
   for (i=0;i<nome.form.elements.length;i++)
	  if(nome.form.elements[i].type == "checkbox")
		 nome.form.elements[i].checked=0
}

São 3 funções: uma para verificar o status atual das checkbox (se estão marcadas ou desmarcadas), a segunda para marcar todos e por último a função que desmarca todos.

Vamos agora a um exemplo no código html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Checkbox</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="checkbox.js"> </script>
  </head>
  <body>
  <h1>Checkbox</h1>
  <form name="form1">
  <table style="width:70%; border:1px solid #000000;">
	<tr bgcolor="#ededed">
		<td><input type='checkbox' name='tudo' onclick='verificaStatus(this)' /></td>
		<td>Código</td>
		<td>Nome</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="ckb[]" value="1" /></td>
		<td>1</td>
		<td>Rafael</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="ckb[]" value="2" /></td>
		<td>2</td>
		<td>João</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="ckb[]" value="3" /></td>
		<td>3</td>
		<td>Pedro</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="ckb[]" value="4" /></td>
		<td>4</td>
		<td>Maria</td>
	</tr>
	<tr bgcolor="#ededed">
		<td><input type='checkbox' name='tudo' onclick='verificaStatus(this)' /></td>
		<td>Código</td>
		<td>Nome</td>
	</tr>
  </table>
  </form>
  </body>
  </html>

Criei um cabeçalho no início da tabela e outro no fim. Nesses cabeçalhos eu coloquei as checkbox responsáveis por marcar/desmarcar todos os registros da tebela. E em cada registro da tabela(obviamente) estão as checks de cada registro (essas serão habilitadas e desabilitadas em massa ou manualmente quando clicadas).

Nas checks responsáveis por marcar/desmarcar todas eu coloco um evento ao serem clicadas que é exatamente a chamada da função verificaStatus() passando como parâmetro o próprio componente html do formulário. Essa função por sua vez verifica se as combos estão marcadas ou desmarcadas e chama a função responsável (marcarTodos() ou desmarcarTodos()).

Para ver o exemplo do nosso post clique aqui.

Abs

Siga-me no twitter: @rafaelwendel

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Nenhum post relacionado

Comentários

  2. Boas. Tens um erro no código:

    Quando fazes check à box e chamas a função, a box já foi “checkada” antes, logo no if de Verificação do check, a box está já marcada, e como tal, desmarca todas as checkboxes.

    Tive a testar a código, e a maneira de resolver é simplesmente no if, em vez de testares se não está checked, é simplesmente testares se já está checked, isto é:

    “function verificaStatus(nome){
    if(nome.form.tudo.checked == 1)
    {
    nome.form.tudo.checked = 1;
    marcarTodos(nome);
    }
    else
    {
    nome.form.tudo.checked = 0;
    desmarcarTodos(nome);
    }
    }”

    Verifica depois, caso não tenha mandado uma gralha.

    Cumprimentos

    Responder

  4. JAVASCRIPT
    $(‘#select_all’).click(function(event) {
    if(this.checked) {
    // Iterate each checkbox
    $(‘:checkbox’).each(function() {
    this.checked = true;
    });
    }
    else {
    $(‘:checkbox’).each(function() {
    this.checked = false;
    });
    }
    });

    HTML

    Apenas isso.

    Responder

    1. E como posso fazer para ao marcar um checkbox, marcar apenas um outro…como se fosse uma copia dele mas com um outro valor no value ? Obrigado

      Responder

  7. Para escrever um pouco menos, fazendo exatamente a mesma coisa dá pra adaptar para isso:

    function verificaStatus(nome){
    acao(nome, nome.form.tudo.checked);
    }
    function acao(nome, status){
    for (i=0;i<nome.form.elements.length;i++)
    if(nome.form.elements[i]..type == "checkbox")
    nome.form.elements[i].checked= status;
    }

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *