1

Estou tentando gerar eventos à partir da ação do usuário em uma lista de checkbox. A ideia é simples: Gerenciar a aparição de conteúdo de "Divs" na tela à partir do médoto ".toogle()" jquery em checkbox no html.

O método funciona para outros elementos inputs, como input tipo texto (type="text"), mas não no checkbox.

OBS: Estou Utilizando HTML, CSS3, BOOTSRAP E JQUERY para fazer a tela

Mas para simplificar a solução, eu pretendo solicitar a juda de vocês para apenas gerar um comando "alert" quando o usuário marcar ou desmarcar um checkbox, utilizando javascript ou jQuery.

//JQUERY/JS - OPÇÃO 1
function teste(){
         alert("foi !");
         }

if($("#selecionado").is(':checked')){
    teste();
}


//JQUERY/JS - OPÇÃO 2
x= $("#selecionado").prop( "checked");

$("#selecionado").change( 
	function(){
     if(x==true){
          alert("merda");
      }
	 }
    );
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-lg-8">
  <div class="input-group">
  
    <span class="input-group-addon">
     <input type="checkbox" id="selecionado" class="chk-services"/>
     </span>
     
     <label type="text" class="form-control label-form" >
      <strong>PRICING</strong> - Valorização de Instrumentos Financeiros
      </label>
  </div>
</div>

2 Respostas 2

3

O seu segundo código não está funcionando pois, quando a página é carregada, ele verifica se o checkbox está selecionado (como por padrão não está, retorna false).

Como esse valor não muda, a sua condição if(x==true) sempre será falsa. O ideal é você adicionar a função no evento change e dentro desse evento, verificar se está ou não selecionado.

No exemplo abaixo utilize a função trigger. Ela serve para disparar um evento determinado. Dessa forma conseguimos reduzir o código.

Exemplo com jQuery

$("#selecionado").change(function() {
  if ($(this).prop("checked") == true) {
    alert("O alerta está funcionando.");
  }
});

$("#selecionado").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-lg-8">
  <div class="input-group">

    <span class="input-group-addon">
     <input type="checkbox" id="selecionado" class="chk-services"/>
     </span>

    <label type="text" class="form-control label-form">
      <strong>PRICING</strong> - Valorização de Instrumentos Financeiros
      </label>
  </div>
</div>

Exemplo com JavaScript Puro

const selecionado = document.querySelector("#selecionado");

selecionado.addEventListener("change", (el) => {
  if (selecionado.checked) {
    alert("O alerta está funcionando.");
  }
});

selecionado.dispatchEvent(new Event("change"));
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-lg-8">
  <div class="input-group">

    <span class="input-group-addon">
     <input type="checkbox" id="selecionado" class="chk-services" />
     </span>

    <label type="text" class="form-control label-form">
      <strong>PRICING</strong> - Valorização de Instrumentos Financeiros
      </label>
  </div>
</div>

0
0

Atribua um evento click ao elemento:

$("#selecionado").click(function(){
    // fazer algo aqui
});

Se você quer que o evento já seja disparado ao carregamento da página, inclua um trigger ao elemento chamando o tipo de evento definido acima:

$("#selecionado").trigger("click");

Para saber se o elemento está checado ou não, use:

$("#selecionado").is(":checked")
// irá retornar "true" ou "false"

Você pode armazenar o elemento $("#selecionado") em uma variável para deixar o código mais enxuto:

var chkbox = $("#selecionado");

Juntando tudo, o código ficaria assim:

var chkbox = $("#selecionado");

chkbox.click(function(){
   if($(this).is(":checked")){
       alert("foi checado");
   }else{
       alert("foi deschecado");
   }
});

chkbox.trigger("click");

Testando:

var chkbox = $("#selecionado");

chkbox.click(function(){
   if( $(this).is(":checked") ){
       alert("foi checado");
   }else{
       alert("foi deschecado");
   }
});

chkbox.trigger("click");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8">
  <div class="input-group">
  
    <span class="input-group-addon">
     <input type="checkbox" id="selecionado" class="chk-services"/>
     </span>
     
     <label type="text" class="form-control label-form" >
      <strong>PRICING</strong> - Valorização de Instrumentos Financeiros
      </label>
  </div>
</div>

2
  • Ótimo, Funcionou! Muito Obrigado! 19/02/2018 às 16:58
  • Legal! Veja neste link a melhor forma de agradecer. Abs!
    – Meu ovo
    19/02/2018 às 18:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .