How to generate event from checkbox marking or unchecking with jquery/javascript

Question

I am trying to generate events from the user action in a checkbox list. The idea is simple: Manage the appearance of "Divs" content on the screen from the ". toogle()" jquery checkbox in html.

The method works for other input elements, such as text input (type="text"), but not in the checkbox.

NOTE: I am Using HTML, CSS3, BOOTSRAP and JQUERY to make the screen

But to simplify the solution, I intend to ask your team to only generate an "Alert" command when the user marks or deselects a checkbox, using javascript or 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>

Answer 1

Your second code is not working because, when the page is loaded, it checks whether the checkbox is selected (as by default it is not, returns false).

As this value does not change, its condition if(x==true) at all times will be false. Ideally you add the function in the event change and within that event, check whether or not you are selected.

In the example below use the function trigger. It serves to trigger a certain event. That way we can reduce the code.

Example with 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>

Example with Pure Javascript

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>

Answer 2

Assign an event click to the element:

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

If you want the event to already be triggered when loading the page, include a trigger to the element by calling the event type defined above:

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

To know if the element is checked or not, use:

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

You can store the element $("#selecionado") in a variable to get the code more streamlined:

var chkbox = $("#selecionado");

Put it all together, the code would look like this:

var chkbox = $("#selecionado");

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

chkbox.trigger("click");

Testing:

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>