oii gente
quando o cara clicar no botão o label que tiver o checkbox ao lado selecionado vai ter que adicionar ‘feito’ ao final do texto
mais só ta adicionando ‘done’ no primeiro label
minha função ta assim
[code]
function add_done(){
var e = document.getElementsByTagName(“input”);
//var obj = document.getElementById(“lista”);
//var texto = document.getElementById(“texto”);
//var label = document.getElementsByTagName(“label”);
Vale a pena tb, adicionar um codigo para fazer um “cache” dos inputs da sua pagina, senao toda vez que vc clicar no botao vc vai percorrrer todo o DOM da sua pagina. As vezes nao eh tao critico, mas eh melhor fazer isso e o seu site vai ter uma performance melhor.
var button = document.getElementById('button1');
var inputs = undefined;
button.onclick = function() {
// carrega os inputs da pagina somente na primeira vez que o botao eh clicado.
inputs = inputs || document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
var item = inputs[i];
if(item.checked) {
item.nextSibling.nodeValue = item.id + " [checked]"
}
else {
item.nextSibling.nodeValue = item.id;
}
}
}
Voce poderia tb usar um framework tipo JQuery ou Dojo, eles tem selectors que vao ajudar pegar os elementos da sua pagina sem ter muito traballho, ai vc nao precisa ficar testando type, como vc esta fazendo no seu codigo.
Por exemplo, em JQuery, vc teria um codigo muito mais limpo:
[quote=wagnerfrancisco]Eu acho que ficaria legal ainda usar uma closure no teu exemplo windsofhell:
var button = document.getElementById('button1');
button.onclick = (function() {
var inputs = document.getElementsByTagName('input');
return function() {
for(var i = 0; i < inputs.length; i++) {
var item = inputs[i];
if(item.checked) {
item.nextSibling.nodeValue = item.id + " [checked]"
}
else {
item.nextSibling.nodeValue = item.id;
}
}
};
}());
Assim a variável inputs ficaria escondida, sem ‘poluir’ o escopo externo e ainda sairia aquela comparação pra ver se input já foi inicializado. [/quote]
Close, but no cigars!
Uma coisa muito comum do povo que esta desenvolvendo em Javascript hoje em dia eh usar funcao anonima onde nao precisa, soh porque ficar mais “bonito”. Ja vi um monte de codigo feio tipo:
item.onclick = (function() {
...
}());
item.onchange = (function() {
...
}());
// e por ai vai. Uma macarronada!
Uma coisa vc esta certo, a variavel nao precisaria ficar fora do escopo do onclick event, porem se a sua intencao eh soh esconder a variavel inputs do escopo externo, eh soh definir a variavel dentro da funcao e pronto.
button.onclick = function() {
var inputs = document.getElementsByTagName('input');
...
}
Nao, desse jeito nao vai ter caching dos checkboxes.
Se eu fosse fazer isso de uma maneira mais correta eu faria o seguinte:
var domHelper = domHelper || {};
domHelper.checkboxController = (function () {
var _checkBoxList = null,
_getCheckBoxes = function () {
if (_checkBoxList) {
return _checkBoxList;
}
_checkBoxList = _getElementsByType('checkbox');
return _checkBoxList;
},
_getElementsByType = function (typename) {
var inputs = document.getElementsByTagName('input');
var elements = [];
for (var i = 0; i < inputs.length; i++) {
var item = inputs[i];
if (item.type == typename) {
elements.push(item);
}
}
return elements;
},
_toggleCheckboxes = function () {
var checkboxes = _getCheckBoxes();
for (var i = 0; i < checkboxes.length; i++) {
var item = checkboxes[i];
if (item.checked) {
item.nextSibling.nodeValue = item.id + " [checked]"
}
else {
item.nextSibling.nodeValue = item.id;
}
}
};
return {
toggleCheckboxes: _toggleCheckboxes
};
})();
Isso eh chamado do Module Pattern e dessa forma eu consigo fazer um encapsulamento das funcoes e expor somente as funcoes que eu desejo que sejam publicas. Se vc for no firebug e inspecionar domHelper.checkboxController a unica funcao que vc vai ver eh toggleCheckboxes.