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

Navigation
0

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

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

OBS: I am using HTML, CSS3, BOOTSRAP and JQUERY to make the screen

But to simplify the solution, I plan to ask you guys to just generate an "alert" command when the user checks or unchecks 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><linkhref="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><divclass="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>
    
asked by anonymous 18.02.2018 / 16:31

2 answers

1

Your second code is not working because when the page loads, it checks to see if checkbox is selected (as default is not, returns false ).

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

In the example below, use the trigger function. It serves to trigger a particular event. That way we were able to 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><scriptsrc="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>
    
18.02.2018 / 16:49
0

Assign an event click to the element: 

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

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

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

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

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

You can store the $("#selecionado") element in a variable to make the code leaner: 

var chkbox = $("#selecionado");

Putting it all together, the code looks 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><divclass="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>
    
18.02.2018 / 17:16
How to make an image fit to div size by background-image: url ('') using javascript or css. How to identify the file that is calling a method in php?