Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

-rafael-

[Resolvido] todos os radios com o mesmo valor

Por , em Javascript

Recommended Posts

-rafael-    1

-rafael-
Postado

tenho uma pagina com varios grupos radios buttos que os valores vao de 1 a 4

 

como coloco todos os radios buttons com o mesmo valor?

 

ex: ao clicar em determinado radio, ele colocar os outros radios dos outros grupos com o mesmo valor.

 

como faço isso?

 

obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

-rafael-    1

-rafael-
Postado

talvez a imagem abaixo ajude a explicar o q eu quero

 

Imagem Postada

 

ao clicar em "Todos" ai em baixo, eu quero que mude todas as outras radios para a que eu clicar.

 

obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não é tão complicado.

 

você só precisa agrupar os radios de 2 formas:

-> em linha, pois cada setor só pode possuir uma marcação

-> em coluna, pois a linha de baixo, corresponde ao mesmo tipo de acesso da de cima.

 

para agrupar em linha, cada linha de radio, deve ter um name exclusivo.

como: setor1, setor2, setor3

 

para agrupar em coluna, pode usar o value, que é comum neles

Ao clicar na linha do todos, basta fazer um loop percorrendo todos os radios, verificando quais tem value igual ao value do input da linha todos que foi clicado, e ai setar o checked="checked" neles.

 

getElementsByTagName(), getElementsById(), .value, .type

vai ser praticamente as instruções mais importantes que você vai precisar.

 

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function marca_todos( valor ){
	var inputs = id('permissao').getElementsByTagName('input');
	for( var i=0; i<inputs.length; i++ ){
		if( inputs[i].type=='radio' ){
			if( inputs[i].value == valor ){
				inputs[i].checked='checked';
			}
		}		
	}
}
window.onload = function(){
	var inputs = id('todos').getElementsByTagName('input');
	for( var i=0; i<inputs.length; i++ ){
		if( inputs[i].type=='radio' ){
			inputs[i].onclick = function(){
				marca_todos( this.value );
			}
		}
	}
}
</script>
</head>
<body>
	<table id="permissao">
		<tr>
			<td>Setor</td>
			<td>Sem acesso</td>
			<td>Acesso somente</td>
			<td>Acesso e alteração</td>
			<td>Acesso, alteração e exclusão</td>
		</tr>
		<tr>
			<td>Setor 1</td>
			<td><input type="radio" name="setor1" value="Sem acesso" /></td>
			<td><input type="radio" name="setor1" value="Acesso somente" /></td>
			<td><input type="radio" name="setor1" value="Acesso e alteração" /></td>
			<td><input type="radio" name="setor1" value="Acesso, alteração e exclusão" /></td>
		</tr>
		<tr>
			<td>Setor 2</td>
			<td><input type="radio" name="setor2" value="Sem acesso" /></td>
			<td><input type="radio" name="setor2" value="Acesso somente" /></td>
			<td><input type="radio" name="setor2" value="Acesso e alteração" /></td>
			<td><input type="radio" name="setor2" value="Acesso, alteração e exclusão" /></td>
		</tr>
		<tr>
			<td>Setor 3</td>
			<td><input type="radio" name="setor3" value="Sem acesso" /></td>
			<td><input type="radio" name="setor3" value="Acesso somente" /></td>
			<td><input type="radio" name="setor3" value="Acesso e alteração" /></td>
			<td><input type="radio" name="setor3" value="Acesso, alteração e exclusão" /></td>
		</tr>
		<tr id="todos">
			<td>Todos</td>
			<td><input type="radio" name="todos" value="Sem acesso" /></td>
			<td><input type="radio" name="todos" value="Acesso somente" /></td>
			<td><input type="radio" name="todos" value="Acesso e alteração" /></td>
			<td><input type="radio" name="todos" value="Acesso, alteração e exclusão" /></td>
		</tr>
	</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

-rafael-    1

-rafael-
Postado

Em primeiro lugar, muito obrigado!

 

já adaptei o codigo ao meu radiogroup e funcionou certinho.

 

mas, não querendo abusar, só mais uma duvida: se eu tiver outros radiogroups, eu tenho q reescrever esse código para cada grupo?

 

mais uma vez obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

? não entendi.

 

uma coisa básica em programação é reutilização, Don't Repeat Yourself !

Estude, crie funções, identifique as rotinas que se repetem, veja o que varia.

Compartilhar este post

Link para o post
Compartilhar em outros sites

-rafael-    1

-rafael-
Postado

também né, William, to querendo muito né... querendo q você faça todo o código pra mim... ai to abusando mesmo né :lol:

 

fiz modificações nele, veja como ficou:

 

function id( el ){
 	return document.getElementById( el );
}
function marca_todos( valor, idtab ){
 	var inputs = id( idtab ).getElementsByTagName('input');
 	for( var i=0; i<inputs.length; i++ ){
 	if( inputs[i].type=='radio' ){
 	if( inputs[i].value == valor ){
 	inputs[i].checked='checked';
 	}
 	} 	
 	}
}
function pega_radio( idtr, idtab ){
 	var inputs = id( idtr ).getElementsByTagName('input');
 	for( var i=0; i<inputs.length; i++ ){
 	if( inputs[i].type=='radio' ){
 	inputs[i].onclick = function(){
 	marca_todos( this.value, idtab );
 	}
 	}
 	}
}

e pra chamar coloco o seguinte, logo abaixo da tabela de radios:

 

<script type="text/javascript"> pega_radio('ID_DA_LINHA_TODOS', 'ID_DA_TABELA')</script>

assim funcionou tudo certinho!!!

 

obrigado pela ajuda!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito