How to display alert boxes if a checkbox is checked using JavaScript?

Question

I need to show an alert box when one of the options is checked I'm using the following code.

function validacion(){
  if (document.getElementById('op1').checked) {
      var x61=document.getElementById('op1').value;
} else {
    var x61="";
}

  alert(" Me gusta : " +x61 );
}

which is not working, but I don't know what to do.

this javascript is perfect but for alert you need to put alert method inside if condition and you have to write HTML for checkbox with onchange event — Sanjaysinh Zala, Mar 25 '19 at 05:29
As it stands now the alert(" Me gusta : " +x61 ) "always" responds as alert(" Me gusta : " + document.getElementById('op1').value) when validacion() is called. If you are not getting an alert you are not calling the function. What exactly are you trying to do because the if statement seems superfluous and is not explained by your question. — Wayne, Mar 25 '19 at 05:40

score 1 · Answer 1 · answered Mar 25 '19 at 05:23

Fire the function on the onchange event of the checkbox

function validacion(){
  if (document.getElementById('op1').checked) {
      var x61=document.getElementById('op1').value;
} else {
    var x61="";
}

  alert(" Me gusta : " +x61 );
}

<input type="checkbox" onchange="validacion()" id="op1" value="abcd">

score 0 · Answer 2 · answered Mar 25 '19 at 05:30

You need to monitor the checkbox for change in value and call the validacion() function.

Otherwise, the function will not be called and nothing will happen as a result.

There are 2 major ways to add an event listener.

1. Add listener inline with the HTML element

function validacion(){
  if (document.getElementById('op1').checked) {
    var x61=document.getElementById('op1').value;
  } else {
    var x61="";
  }

  alert(" Me gusta : " +x61 );
}

<label>
  <input type="checkbox" id="op1" value="op1_value" onchange="validacion()">
  op1
</label>

2. Use `addEventListener()`

function validacion(){
  if (document.getElementById('op1').checked) {
    var x61=document.getElementById('op1').value;
  } else {
    var x61="";
  }

  alert(" Me gusta : " +x61 );
}

document.getElementById('op1').addEventListener('change', validacion);

<label>
  <input type="checkbox" id="op1" value="op1_value">
  op1
</label>

score 0 · Answer 3 · answered Mar 25 '19 at 05:40

You can generalize the function for all checkboxes.

JavaScript:

function validation(elm){
    if(elm.checked){
        var x61 = elm.value;
    }
    else {
        var x61 = "";
    }

    alert("Me gusta : " + x61);
}

HYML:

<input type="checkbox" value="value1" onchange="validation(this)">
<input type="checkbox" value="value2" onchange="validation(this)">

Alternative:

You can also use addEventListener().

JavaScript:

function validation(e){
    if(e.target.checked){
        var x61 = e.target.value;
    }
    else {
        var x61 = "";
    }

    alert("Me gusta : " + x61);
}

document.getElementById("idOfYourCheckbox").addEventListener("change", validation);

How to display alert boxes if a checkbox is checked using JavaScript?

3 Answers3

1. Add listener inline with the HTML element

2. Use addEventListener()

2. Use `addEventListener()`