Show message when radio button selected

Question

I am trying to get the following to work without much success

$(document).ready(function()
{
    $('#shippingOptionRadio-5ed62ea40135a-7dac01c2c834210be865275f0700a45a').click(function()
    {
        alert("Please ensure you have selected the correct option");
    });
});
</script>

Using inspect on Chrome, I looked for the ID for the radio button and found shippingOptionRadio-5ed62ea40135a-7dac01c2c834210be865275f0700a45a but even so, when I save the javascript and load the page and click the radio button, no message is displayed.

The code I used to find the ID in inspect was as follows:

<input name="shippingOptionIds.5ed62ea40135a" class="form-checklist-checkbox optimizedCheckout-form-checklist-checkbox" id="shippingOptionRadio-5ed62ea40135a-7dac01c2c834210be865275f0700a45a" type="radio" value="7dac01c2c834210be865275f0700a45a">

Answer 1

you have to add an event (type input not click) to the radio and then add condition if the input.checked === true then show message

 // select radio input const input = document.getElementById('input'); // add event on input input.addEventListener('input', () => { if (input.checked) { alert('this is a message;'); } });

 <input type="radio" id="input">