Como mudar label a partir do checkbox dinamicamente

16 de março de 2012 9 respostas

diogo10 16 de março de 2012

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

function add_done(){

var e = document.getElementsByTagName("input"); 
//var obj = document.getElementById("lista");
//var texto = document.getElementById("texto");
//var label = document.getElementsByTagName("label");
        
           for(var i=0;i&lt;e.length;i++)
        {
               
          if (e[i].type=="checkbox" && e[i].checked == true && e[i].disabled == true)
                {
                                                                alert(document.getElementById('label_texto').innerHTML += ' (Done)');
                                
                                        
                        
        
                           }
}

9 Respostas

windsofhell 19 de mar. de 2012

Fiz um exemplo aqui:

HTML

<input type="checkbox" id="test1">test1<br>
<input type="checkbox" id="test2">test2<br>
<input type="checkbox" id="test3">test3<br>
<input type="checkbox" id="test4">test4<br>
	
<button id="button1">Go!</button>

Javascript:

var button = document.getElementById('button1');
button.onclick = function() {
	var 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;
		}
	}
}

Espero que ajude.

//Daniel

Anonymous 19 de mar. de 2012

valeuu daniel
=D

windsofhell 20 de mar. de 2012

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:

$(document).ready(function() {
    		
       $('#button1').click(function() {
    			
               $(':checkbox:checked').each(function(idx, item) {
         	       item.nextSibling.nodeValue = item.id + " [checked]";
               });

    	       $(':checkbox').not(':checked').each(function(idx, item) {
    		       item.nextSibling.nodeValue = item.id;
               });
    	
      });
    		
});

//Daniel

wagnerfrancisco 20 de mar. de 2012

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.

windsofhell 20 de mar. de 2012

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.

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');
   ...
}

//Daniel

Anonymous 20 de mar. de 2012

Mas nesse caso você não faria cache do ‘inputs’ né? toda vez você iria percorrer o DOM…

wagnerfrancisco 20 de mar. de 2012

Mas nesse caso você não faria cache do ‘inputs’ né? toda vez você iria percorrer o DOM…

windsofhell 21 de mar. de 2012

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.

Ai para usar esse modulo:

var controller = domHelper.checkboxController,			
			button = document.getElementById('button1');
			    
button.onclick = function() {				
        controller.toggleCheckboxes();	
}

Novamente, eh mais facil usar um framework pra fazer esses tipos de operacoes. Mas eu escrevi esse codigo soh pra ilustrar o Module Pattern.

Pra quem quiser ver o codigo rodando, coloquei ele no JSFiddle: http://goo.gl/5F2K6

//Daniel

wagnerfrancisco 21 de mar. de 2012

windsofhell, interessante!

No Javascript: The Definitive Guide eu vi uma breve descrição deste padrão também.

Criado 16 de março de 2012

Ultima resposta 21 de mar. de 2012

Respostas 9

Participantes 4

9 Respostas

Topicos relacionados