É que o javascript é mais próximo de linguagens robustas com suporte a objetos que o ASP. Mas se você seguisse a lógica que eu passei conseguiria fazer tranquilo, e com muito menos código, veja só:
A parte de marcação é simples, vou usar tabelas porque é o que você aparenta estar usando, mas atente que tabelas são bem poderosas se comparado ao que você usufruiu delas até agora pelo que eu vi nesse seu modelo.
<form action="#" name="opts" method="post"><table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Opção</th> <th>Descrição</th> </tr> </thead> <tfoot> <tr> <th colspan="2"> <a href="" onclick="changeState('check'); return false;">Marcar Todos</a> | <a href="" onclick="changeState('uncheck'); return false;">Desmarcar Todos</a> </th> </tr> </tfoot> <tbody> <tr> <th><input onclick="changeBgColor(this);" type="checkbox" name="opt1" /></th> <td>Opção 01</td> </tr> <tr> <th><input onclick="changeBgColor(this);" type="checkbox" name="opt2" /></th> <td>Opção 02</td> </tr> <tr> <th><input onclick="changeBgColor(this);" type="checkbox" name="opt3" /></th> <td>Opção 03</td> </tr> </tbody></table></form>Nada de novo até agora, usei as tabelas (com cabeçalhos, rodapé e corpo definidos). Um formulário e as opções. Repare que os inputs chamam a função "changeBgColor", e os links a função "changeState". Eu prefiro colocar a opção de Marcar e Desmarcar separadas e visíveis desde o início, porque o usuário precisa saber quais opções ele tem.
Agora a parte do java script:
function changeBgColor(b){
(b.checked==true) ? b.parentNode.parentNode.className='checked' : b.parentNode.parentNode.className='unchecked';
}Essa função é exatamente a mesma que eu te passei, o que eu fiz foi mudar ao invés da cor de fundo, eu altero a classe do elemento. Acho melhor trabalhar com folhas de estilo.
Agora a função que marca e desmarca todos:
function changeState(a){
var form = document.forms['opts'];
var elms = form.elements;
var act = (a=='check') ? true : false;
for(x=0;x<elms.length;x++){
if(elms[x].type.toLowerCase()=='checkbox'){
elms[x].checked = act;
changeBgColor(elms[x]);
}
}
}É isso mesmo, 12 linhas de código, isso contando o nome da função, a linha pra separar o código e as chaves que ficam em linhas separadas para melhor organização. ^^
As 3 primeiras linhas são definições das variáveis. O formulário que contêm os elementos, os elementos em si, e a ação a ser executada na forma de um objeto bool (checked=true, unchecked=false);
Depois é um loop nos elementos do formulário. Dentro do loop eu verifico se o elemento é um checkbox. Não há problema em tentar aplicar o checked em um input text por exemplo. Ele só vai logar um alert no console de erros no FF, e vai mostrar o icone amarelo no IE, mas a execução continua. Para evitar os inconvenientes eu faça a checagem.
Dentro do if só tem os 2 comando que eu preciso. Marcar ou desmarcar o elemento e logo em seguida eu chamo a função de mudar a cor de fundo no elemento que acabou de ser manipulado.
Simples assim. Pegou essa ?!
De brinde leva essa folha de estilos:
*{ padding:0px; margin:0px;}form{ font:11px Trebuchet MS, Verdana, serif;}table{ border:0px; width:300px; margin:5px;}table thead th{ background:#eee; border-bottom:1px solid #bbb; border-right:1px solid #fff; padding:3px;}table tfoot th{ background:#eee; border-top:1px solid #fff; border-bottom:1px solid #bbb; padding:3px;}table tfoot th a{ color:#444;}table tfoot th a:hover{ text-decoration:none;}table tbody td{ padding:2px; border-top:1px solid #fff;}table tbody th{ text-align:center;}table tbody tr.checked{ background:#eef;}table tbody tr.unchecked{ background:#fff;}
Edição feita por: bimonti, 17/08/2007, 13:29.
