如果使用JavaScript选中了复选框，如何显示警报框？

Question

选中其中一个选项时，我需要显示一个警报框 我正在使用以下代码。

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

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

这不起作用，但是我不知道该怎么办。

Answer 1

在复选框的onchange事件上触发功能

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">

Answer 2

您需要监视复选框的值更改并调用validacion()函数。

否则，将不会调用该函数，因此不会发生任何事情。

添加事件侦听器有两种主要方法。

1。在HTML元素中内联添加侦听器

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。使用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>

Answer 3

您可以概括所有复选框的功能。

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)">

替代：

您也可以使用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);