Überprüfen Sie, ob die Eingabe der Radio-ID ausgewählt ist, bevor das Formular gesendet wird

Ich arbeite mit WooCommerce auf WordPress. In der Kasse möchte ich prüfen, ob ein bestimmtes Optionsfeld ausgewählt ist, bevor der Benutzer absendet. Wenn eine bestimmte ID ausgewählt ist, führen Sie a aus window.alert zur Zeit. Ich habe das folgende Formular, das von WooCommerce bereitgestellt wird:

<ul id="shipping_method">
    <li>
        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_legacy_local_pickup" value="legacy_local_pickup" class="shipping_method">
        <label for="shipping_method_0_legacy_local_pickup">Local Pickup</label>
    </li>
    <li>
        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_distance_rate_shipping" value="distance_rate_shipping" class="shipping_method" checked="checked">
        <label for="shipping_method_0_distance_rate_shipping">Delivery from 536 S College Ave, Chicago, IL</label>                  
    </li>
</ul>

Zum Testen verwende ich bisher folgendes Skript:

<script type="text/javascript">
    if (document.getElementById('shipping_method_0_distance_rate_shipping').checked) {
        alert("Delivery checked!");
    }
</script>

Das Skript funktioniert hervorragend, wenn die Seite geladen wird, aber wenn ich das Optionsfeld deaktiviere und erneut auswähle, bevor die Seite gesendet wird, funktioniert das Skript nicht. Wenn ich in Echtzeit sehen kann, welche sie auswählen, würde das mein unmittelbares Problem lösen.

Ich schätze Ihre Zeit und Hilfe dabei.

So benachrichtigen Sie, wenn darauf geklickt wird:

window.onload = function () { // when page loads

 // To alert when clicking

  document.getElementById('shipping_method_0_distance_rate_shipping').onclick=function() {
    alert("Delivery checked!");
  }    

  // To test when submitting:

  document.getElementById('yourFormId').onsubmit=function() {
    if (!document.getElementById('shipping_method_0_distance_rate_shipping').checked) {          
      alert("Delivery not checked!");
      return false; //  cancel submit
    }    
  }    
}

So fragen Sie, ob sie auf die richtige Option geklickt haben:

window.onload = function () { // when page loads

  document.getElementById('yourFormId').onsubmit=function() {
    return confirm(document.getElementById('shipping_method_0_distance_rate_shipping').checked ? 
      "Local Pickup?" : 
      "Delivery from 536 S College Ave, Chicago, IL?");
  }    
}

Ihr Javascript wird nur einmal ausgeführt. Sie müssen den Wert des aktivierten Radios jedes Mal überprüfen, wenn Sie ein Optionsfeld aktivieren (naja, das ist ein seltsamer Ausdruck).

Siehe die Antwort von @Afnan Ahmad für ein funktionierendes Beispiel.

Rufen Sie diese Funktion vor dem Absenden auf. Wenn Sie die Formularübermittlung stoppen möchten, fügen Sie Ihr Formular hinzu onsubmit

<form name="yourform" onsubmit="return validate();"> 

function validate() {
        if (document.getElementById('shipping_method_0_distance_rate_shipping').checked) {
            alert("checked submit form");
            return true;
        } else {
            alert("Unchecked form will not be submitted");
            return false;
        }
    }

<input id="shipping_method_0_distance_rate_shipping" name="shipping_method[0]" type="checkbox" onclick="validate()" />

Sie können Ihren Radiobuttons eine Klasse zuweisen und anhand dessen den angeklickten Wert erhalten.

Beispielsweise

HTML

<input type="radio" name="option" value="o1" class="test">option1</input>
<input type="radio" name="option" value="o2" class="test">option2</input

JS

$(document).on('click','.test',function(event){
    var selectedOption = $(this).val()
  console.log(selectedOption)
});

Sie können die Geige als Referenz sehen
https://jsfiddle.net/7okvyxx3/