• Login

Mathias Grimm - beta

Sede pelo conhecimento

• Home
• Sobre

BuscaPé, líder em comparação de preços na América Latina

Marcar Todos

Posted by Mathias Grimm on junho 24, 2008 in JavaScript

Bom... esse artigo é pra começar, um exemplo simples e útil!
O código está dividido em 2 partes mas eles ficam no mesmo arquivo...
A idéia é criar uma função javascript que percorra os elementos do formulario e compare o id dos elementos com o id do elemento que foi clicado.

Na linha 26 temos a criação do padrão que será utilizado na expressão regular que pesquisará os componentes do formulario. Foi utilizado o eval pois o padrão não pode ser uma string, como no comentário logo ao lado do eval.
A padrão é, strings que começam com idFuncionario ou idEmpresa, no caso é o id do componente que foi clicado mais _ mais quantos e quaisquer caractéres forem encontrados.

o exec executa a expressão regular para o id dos elementos, caso o elemento esteja no padrão é retornado true, caso contrário false, por isso quando clicamos no marcar todos do funcionário apenas elementos que comecem com idFuncionario_ passam no padrão.

 
<form name=formulario>
	<fieldset>
		<legend> Funcionários </legend>
<input id="idFuncionario" type="checkbox" onchange="javascript:marcarTodos(this);"/> Todos/Nenhum
<hr />
<input id="idFuncionario_001" type="checkbox" /> Funcionário 001 <br/>
<input id="idFuncionario_002" type="checkbox" /> Funcionário 002 <br/>
<input id="idFuncionario_003" type="checkbox" /> Funcionário 003 <br/>
	</fieldset>
	<fieldset>
		<legend> Empresas </legend>
<input id="idEmpresa" type="checkbox" onchange="javascript:marcarTodos(this);" /> Todos/Nenhum
<hr />
<input id="idEmpresa_001" type="checkbox" /> Empresa 001 <br/>
<input id="idEmpresa_002" type="checkbox" /> Empresa 002 <br/>
<input id="idEmpresa_003" type="checkbox" /> Empresa 003 <br/>
	</fieldset>
</form>
 

 
<script>
function marcarTodos(componente)
{
	var form = document.formulario;
	eval("var padrao = /^"+componente.id+"_.*/;"); // var padrao = /^idFuncionario_./;
	for(var i=0;i < form.elements.length ; i++)
	{
		if(padrao.exec(form.elements[i].id))
		{
			form.elements[i].checked = componente.checked;
		}
	}
}
</script>
 

Resultado: (testei apenas no firefox)

Opções

Funcionários

Todos/Nenhum

---

Funcionário 001

Funcionário 002

Funcionário 003

Empresas

Todos/Nenhum

---

Empresa 001

Empresa 002

Empresa 003