[Resolvido] Passar CHECKED no seletor no jQuery para verificação

[Maykel-ctba 233]

Fala povo!

 

Estou com a seguinte situação: Tenho um quadradinho (um <span>, que ao clicar abrirá um alert), e logo em cima, um checkbox que ao clicar, também deve fazer a mesma função.

 

Estou montando da seguinte maneira:

 

HTML:

<ul class="lista-cores">
<li title="Azul">
   <input type="checkbox" id="cbCor" name="cbCor[]" />
   <span style="0000FF"></span>
</li>

 

Javascript/jQuery:

$('ul.lista-cores li span, ul.lista-cores li input:checked').click(function(){
   alert("Mensagem");
});

 

Quando eu clico no span, funciona que é uma beleza, mas nao sei pq ao clicar no input, não dá o alerta!

 

Eu li na documentação do jQuery que seria basicamente este o processo mesmo: http://api.jquery.com/checked-selector/

 

Alguém pode me ajudar?

[William Bruno 1501]

Te indico fazer assim:

 

 

<li title="Azul">
<label>
   <input type="checkbox" id="cbCor" name="cbCor[]" />
   <span style="0000FF"></span>
</label>
</li>

 

ai o seletor seria algo como:

 

$('ul.lista-cores label').click(function(){
   alert("Mensagem");
});

 

note que a vantagem aqui será que ao clicar no span, o input será tickado.

[Maykel-ctba 233]

Boa idéia William Bruno! Deu certo!

 

Aproveito o tópico só para tirar uma outra dúvida... ao clicar, e ao invés de fazer abrir a mensagem, pedi para ele dar fadeIn em uma div (marcando também o checkbox).

 

Mas queria que, ao clicar de novo no label, junto ao desmarcar, ele fechasse essa div, porém não está funcionando (a div não está sumindo):

 

HTML:

<li title="Azul">
   <label>
       <input type="checkbox" id="cbCor" name="cbCor[]" />
       <span style="background:#0000FF"></span>
       <div class="opcoesCor">
           <p>Conteúdo</p>
       </div>
   </label>
</li>

 

 

jQuery

$('ul.lista-cores label').click(function(){
   $(this).find('.opcoesCor').fadeIn(200);
},function(){
   $(this).find('.opcoesCor').fadeOut(200);
});

[William Bruno 1501]

a função .click() não aceita 2 callbacks como você passou.

 

você precisa fazer um IF e ver oq tem q fazer.

 

IF escondido

--mostra

ELSE

--esconde

[Maykel-ctba 233]

hummmm!!! Eu já tinha feito isso com o .hover, achei que daria!

 

Vou testar e vejo por aqui! Como está solucionado o primeiro problema, pode trancar! ;-)

 

Valeu! :thumbsup:

[Maykel-ctba 233]

@William Bruno

Não deu certo fazer com IF/ELSE.

 

		$('ul.lista-cores label').click(function(){
		if('#cbCor:checked')
		{
			$(this).find('.opcoesCor').fadeIn(200);
		}
		else
		{
			alert('teste');
			$(this).find('.opcoesCor').fadeOut(200);
		}
	});

 

Quando o box .opcoesCor já está a mostra, e eu clico novamente no label, ele não fecha (devia cair no else, mas nem o alert está dando).

[William Bruno 1501]

tente assim:

 

if( $('#cbCor:checked') )

[Maykel-ctba 233]

Que vacilo! AHAHAH! Passei o seletor sem o $()... mas não funcionou do mesmo jeito <_<

 

		$('ul.lista-cores label').click(function(){
		if($('#cbCor:checked')){ $(this).find('.opcoesCor').fadeIn(200); }
		else{ alert('teste'); }
	});	

 

Eu descobri uma coisa... se eu clico pra abrir a div opcoesCor, ele abre normalmente, e ao clicar no conteúdo dela (tem um micro-form dentro, com 2 campos), ele desmarca o check, e não deveria.. acho que é por causa do label, então acho que a lógica lá em cima não está certa, heheh!

[William Bruno 1501]

e ao clicar no conteúdo dela (tem um micro-form dentro, com 2 campos), ele desmarca o check, e não deveria

então esse HTML está errado.

 

Esse conteudo não deveria ser filho do LABEL.

[Maykel-ctba 233]

Como seria o jeito certo, então?

Eu preciso que seja dentro de algum elemento que englobe tudo, pensei em aproveitar mesmo o label, pois dentro há uma classe opcoesCor, e ela se repete em cada LI. Se eu deixar fora, ao clicar, abrirá todas, não?

 

HTML Gerado:

<ul class="lista-cores">
   <li title="Preto - Clique para abrir as opções">
       <label>
           <input type="checkbox" id="cbCor" name="cbCor[]" />
           <span style="background:#000000"></span>
           <div class="opcoesCor">
               <label id="slProntaEntrega"><p>Pronta entrega?</p><select class="prontaentrega" id="slProntaEntrega" name="slProntaEntrega"><option value="S">Sim</option><option value="N">Não</option></select></label>
               <br />
               <label id="txQuantidadeMinima"><p>Qtd. minima:</p></label><input class="quantidademinima text-input" type="text" id="txQuantidadeMinima" name="txQuantidadeMinima" />
           </div>
       </label>
   </li>
   <li title="Branco - Clique para abrir as opções">
       <label>
           <input type="checkbox" id="cbCor" name="cbCor[]" />
           <span style="background:#ffffff"></span>
           <div class="opcoesCor">
               <label id="slProntaEntrega"><p>Pronta entrega?</p><select class="prontaentrega" id="slProntaEntrega" name="slProntaEntrega"><option value="S">Sim</option><option value="N">Não</option></select></label>
               <br />
               <label id="txQuantidadeMinima"><p>Qtd. minima:</p></label><input class="quantidademinima text-input" type="text" id="txQuantidadeMinima" name="txQuantidadeMinima" />
           </div>
       </label>
</li>
<div class="clear"></div>
</ul>

 

Javascript:

	$('ul.lista-cores label').click(function(){
		if($('#cbCor:checked')){ $(this).find('.opcoesCor').fadeIn(200); }
		else{ alert('teste'); }
	});

 

EDITADO!

 

Consegui resolver o problema do label, a sua lógica realmente está certa!

 

Porém... ainda não resolvi o problema de não entrar no else! :S

 

		$('ul.lista-cores label').click(function(){
		if($('#cbCor:checked')){ $(this).parent().find('.opcoesCor').fadeIn(200); }else{ $(this).parent().find('.opcoesCor').fadeOut(200);  }
	});	

 

<li title="Clique para abrir as opções">
   <label>
       <input type="checkbox" id="cbCor" name="cbCor[]" />
       <span style="background:#000000"></span>
   </label>
   <div class="opcoesCor">
       <label id="slProntaEntrega"><p>Pronta entrega?</p><select class="prontaentrega" id="slProntaEntrega1" name="slProntaEntrega1"><option value="S">Sim</option><option value="N">Não</option></select></label>
       <br />
       <label id="txQuantidadeMinima1"><p>Qtd. minima:</p></label><input class="quantidademinima text-input" type="text" id="txQuantidadeMinima1" name="txQuantidadeMinima1" />
   </div>
</li>

[William Bruno 1501]

não necessariamente.

 

Poderia ser assim:

<li title="Branco - Clique para abrir as opções">
       <label>
           <input type="checkbox" id="cbCor" name="cbCor[]" />
           <span style="background:#ffffff"></span>
       </label>
           <div class="opcoesCor">
               <label id="slProntaEntrega"><p>Pronta entrega?</p><select class="prontaentrega" id="slProntaEntrega" name="slProntaEntrega"><option value="S">Sim</option><option value="N">Não</option></select></label>
               <br />
               <label id="txQuantidadeMinima"><p>Qtd. minima:</p></label><input class="quantidademinima text-input" type="text" id="txQuantidadeMinima" name="txQuantidadeMinima" />
           </div>
       </li>

 

e então o seletor jQuery ficaria:

$(this).next('.opcoesCor').fadeIn(200); 

 

entendeu ?

[Maykel-ctba 233]

A edição deu um delay no post, heheh, eu consegui fazer!

 

Agora, só fica a questão mesmo do if/else. Será que é melhor criar um novo tópico?