Criar checkbox dinâmicas

07/10/2013

0

PHP

Pessoal, não sei se isso entraria como PHP ou como javascript, mas é o seguinte:

Estou criando um Painel de Controle onde são permitidos múltiplos envios de fotos. Sendo assim, clico num checkbox e é aberta uma div com a opção de carregar uma foto e inserir um texto.

			function mostra_div(){
				if (document.getElementsByName('ch1').checked)
				{
					$('#item1').fadeIn('slow');
					
				}
				else
				{
					$('#item1').fadeOut('slow');
				}
			}

<input type="checkbox" value="teste" name="ch1" onchange="mostra_div();" id="ch1" />Mais itens
<div id="item1" style="height:200px; width:400px; background-color:#F00; display:none;"></div>


Aparece na tela assim:

[ ] Mais itens

E quando seleciono, aparecem:
[ Selecionar arquivo...] Carregar foto
[____________] texto dessa foto

Beleza, funciona perfeitamente bem. Porém como são múltiplos envios, teria que aparecer logo abaixo, de novo, uma checkbox que permita quando selecionada, fazer a mesma coisa, e assim por diante.

Basicamente, quando clico no checkbox, é necessário criar outra checkbox automática que faça a mesma coisa, e assim por diante, até quando o usuário não mais selecionar nenhuma checkbox. Como eu poderia fazer algo assim?
Lembrando ainda que, os nomes de selecionar fotos, checkbox e texto da foto devem estar como um array para que possam ser inseridos no BD.

Entenderam ou confundi?

Desde já agradeço!
Ayglon Fernando

Ayglon Fernando

Responder

Posts

08/10/2013

Ayglon Fernando

Resolvido... fiz da seguinte maneira:

        <script type="text/javascript">
			var i=0;
			function add(){
				if (document.getElementById('check'+i).checked) 
				{   
					i++;  
					var title = 'Mais itens';
					var node = document.createElement('div');
					node.innerHTML =  '<label for="upload' + i + '">Foto Extra '+ i +'</label> <input type="file" id="file' + i + '" name="file' + i + '"><br /><br /><label for="texto' + i + '">Texto Extra '+ i +'</label> <textarea id="texto' + i + '" name="texto' + i + '"></textarea><br /><br /><input type="checkbox" id="check' + i + '" name="check' + i + '" onchange="add();"> <label for="check' + i + '">Mais itens</label>';       
					
					document.getElementById('conteudo').appendChild(node);
				}
			}		
		</script> 


e dentro do checkbox fiz:

<input type="checkbox" value="teste" name="ch1" onchange="add();" id="check0" />Mais itens
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar