[jQuery] – Selecionar um checkbox e marcar todos « Danilo

[jQuery] – Selecionar um checkbox e marcar todos

Hoje vamos ver como selecionar todos os checkbox’s clicando apenas em um.

Chamando o jQuery

Para baixar o jQuery clique aqui.

<script src="jquery.js" type="text/javascript"></script>

HTML:

Aqui está o formulário, colocar um id no checkbox que você vai querer clicar e selecionar todos.

<form action="" method="post">
	<input type="checkbox" value="0" id="selectAll" name="opcao[]" style="margin-left: 30px;"/> <b>Todos</b>
        <input type="checkbox" value="1" name="opcao[]" style="margin-left: 30px;"/> php
	<input type="checkbox" value="2" name="opcao[]" style="margin-left: 30px;"/> jquery
	<input type="checkbox" value="3" name="opcao[]" style="margin-left: 30px;"/> ruby
	<input type="checkbox" value="4" name="opcao[]" style="margin-left: 30px;"/> css
</form>

Javascript:

Aqui neste código estamos bindando um evento clique para elemento com o id do checkbox que queremos que com um clique ele marque e desmarque o restante dos checkbox’s.

$(document).ready(function() {
	$('#selectAll').click(function() {
		if(this.checked == true){
			$("input[type=checkbox]").each(function() { 
				this.checked = true; 
			});
		} else {
			$("input[type=checkbox]").each(function() { 
				this.checked = false; 
			});
		}
	});	
});

Compare preços de livros de javascript.

javascript, jQuery

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Postado na terça-feira, 2 de junho de 2009, 22:23

#1 por Chris Benseler - 10 de outubro de 2009 em 20:01

Danilo, acho que o título do post poderia fazer referência a biblioteca jQuery, não? Tipo, jQuery != javascript

Ou melhor, qualquer biblioteca javascript != do que javascript em si

[]s!

Citar
#2 por Danilo - 10 de outubro de 2009 em 20:09

Valeu Chris, to arrumando o Título…
Abração!!

Citar
#3 por Marcelo Sabadini - 14 de outubro de 2009 em 21:56

Ola Danilo tudo bom?

Tenho acompanhado seu site.. muito legal!

Mas, para ‘checkar’ todos os checkbox eu tenho usado assim:

$(”input[type=checkbox]“).attr(’checked’, ‘checked’);

e para ‘des-checkar’:

$(”input[type=checkbox]“).attr(’checked’, ”);

Não sei se é a forma mais elegante, mas assim evito o loop do ‘each’.

Abraços!!

Citar
#4 por Danilo - 14 de outubro de 2009 em 22:35

Boaaa Marcelo, é um jeito também, e parece ser melhor do que coloquei no exemplo…
Para “des-checar” você também pode usar o metodo removeAttr() do jQuery…
tipo:
$(”input[type=checkbox]“).removeAttr(’checked’);

Valeu ae por contríbuir no blog…
Abraço!!

Citar
#5 por Wellington - 16 de outubro de 2009 em 00:41

Fiz igual o @MarceloSabadini, mas axei legal o uso do this.checked para isso !

Citar
#6 por Leonardo Guedes - 29 de outubro de 2009 em 14:13

A sugestao seria de adicionar um “class” para o input:checkbox, distirguindo os grupos de checkbox caso tenha mais de um no mesmo form.
‘todos’
‘1′
‘2′

Assim, a funcao abaixo serve para checked e unchecked.
jQuery(’#selecionarTodos’).click(function(){jQuery(’.NomeClassCheck’).attr(’checked’,this.checked);});

Espero ter ajudado.

Citar