Как отобразить окна предупреждений, если флажок установлен с использованием 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

Вы можете обобщить функцию для всех флажков.

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

Answer 3

Вам необходимо установить флажок для изменения значения и вызвать функцию 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>