Ir para conteúdo

POWERED BY:

Arquivado

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

janick

Checkbox jQuery

Por , em Javascript

Recommended Posts

janick    1

janick
Postado

Olá,

 

estou com dúvida quanto a checkbox e jQuery.

 

tenho duas divs. uma com uma lista com cada item acompanhado de um checkbox, e a outra vazia.

a idéia é, quando o usuário clicar no checkbox, este item seja acrescentado na div ao lado.

a na medida que o usuário for clicando nos itens escolhidos, eles serem acrescentados na div ao lado.

 

se alguem puder me dar uma luz, pelo menos da lógica, valeu obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

JunioR-CWB    0

JunioR-CWB
Postado

Veja este exemplo:

 

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
</head>
<style>
ul {
   margin:0;padding:0;
   list-style:none;
}
div#left,div#right {
   float:left;
   width:200px;
   height:200px;
   border:1px solid #444;
}
div#right {
   margin-left:2px;
}
</style>
<script>
$(function(){
   var $left = $('#left'),
	  $right = $('#right').find('ul');

   $left.find('ul > li > :checkbox').bind('click',function(){
	  if (this.checked) {
		 var li = document.createElement('li');
		 $(li).attr('id',this.name).text($(this).next().text()).appendTo($right[0]);
	  } else {
		 $right.find('li#'+this.name).remove();
	  }
   });
});
</script>
<body>
<div id="left">
   <ul>
	  <li><input type="checkbox" name="l1" /><span>Lista 1</span></li>
	  <li><input type="checkbox" name="l2" /><span>Lista 2</span></li>
	  <li><input type="checkbox" name="l3" /><span>Lista 3</span></li>
	  <li><input type="checkbox" name="l4" /><span>Lista 4</span></li>
   </ul>
</div>
<div id="right">
   <ul>
   </ul>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

janick    1

janick
Postado

cara deu certo eu usando exatamente este exemplo que você passou

 

só que no meu caso está dando pau, porque esses dados da div LEFT, estao vindo dinamicamente, existe um select antes dele, onde eu seleciono uma categoria, e ele me retorna as subcategorias nesta div LEFT.

 

ai desta maneira ele nao acha os checkbox logo de inicio. tentei colocar uma função no onchange mas nao tá dando certo

se puder ajudar, valeu!

continuo tentando daqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

janick    1

janick
Postado

Esta é a função busca subcategoria

 

function buscaSubcategoria( valor ) {

	if( valor == 0 ) {

		$( "#subcategorias" ).html( "<li>Selecione uma categoria</li>" );

	}

	else {

		$.ajax( {

			type: "POST",
			url: "php/processa.php",
			data: "acao=buscaSubcategoria&id=" + valor,

			success: function( resposta ) {

				$( "#subcategorias" ).html( resposta );

			}

		} );

	}

}

ai a resposta dela é colocada na #subcategorias que equivale a #left que você fez. ai abrem os itens com o campo checkbox do lado.

o resto é o código que você me mostrou!

Compartilhar este post

Link para o post
Compartilhar em outros sites

JunioR-CWB    0

JunioR-CWB
Postado

Agora entendi!

 

Bom, a solução é simples.

 

Basta adicionar a ação dos selectores na requisição xhr no método success:

function bindCheckbox() {
   
   var $left = $('#left'),
	  $right = $('#right').find('ul');

   $left.find('ul > li > :checkbox').unbind().bind('click',function(){
	  if (this.checked) {
		 var li = document.createElement('li');
		 $(li).attr('id',this.name).text($(this).next().text()).appendTo($right[0]);
	  } else {
		 $right.find('li#'+this.name).remove();
	  }
   });
}
function buscaSubcategoria() {
 (...)
$.ajax( {

			type: "POST",
			url: "php/processa.php",
			data: "acao=buscaSubcategoria&id=" + valor,

			success: function( resposta ) {

				$( "#subcategorias" ).html( resposta );

				bindCheckbox();

			}

		} );

Compartilhar este post

Link para o post
Compartilhar em outros sites

janick    1

janick
Postado

cara estranho, ele inseri a LI

coloquei até um $( li ).css( 'backgroundColor' , '#ffffff' ) pra ver se esta indo mesmo e está.

 

porém o conteudo não vai, to tentando aqui ver o que é

mas valeu obrigado pela idéia!

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