What is the best way to prevent the double tap event on radio buttons for mobile devices?

Question

What is the best way to prevent the double tap event on radio buttons for mobile devices?

My form with radio buttons works perfectly on the computer, but encounters issues on mobile devices. Users are required to double-tap to select a radio button, causing confusion.

Is there a way to disable the double-tap requirement? I've looked at other solutions, but they use different code which I'm unsure how to implement in my situation.

Any assistance would be greatly appreciated.

Here's the current code I have:

function myFunction() {
   
        if(document.getElementById('monthly').checked) {
            document.getElementById('myLink').href = "https://www.rageheart.co/beast-monthly";
        }
        if(document.getElementById('yearly').checked) {
            document.getElementById('myLink').href = "https://www.rageheart.co/beast-yearly";
        }
        if(document.getElementById('onemonth').checked) {
            document.getElementById('myLink').href = "https://www.rageheart.co/beast-1-month";
        }

    }

<form><div class="monthly-box"><label for="monthly" class="container">
  <div class="monthly-header">Most Popular</div>
  <div class="monthly-body">
  <div class="monthly-input"><input type="radio" id="monthly" name="payment" value="monthly" checked="checked"><span class="checkmark-monthly-yearly"></span></div>
  <div class="monthly-text">
    <h2>Monthly Subscription - $79 USD <span style="color:#929292;font-weight: normal;"><s>$99</s></span></h2>
    <ul>
      <li>60 recorded audio lessons + live class on Zoom</li>
      <li>1-on-1 welcome call with the founder</li>
      <li>7-Day Free Trial + 90-Day Money Back Guarantee</li>
    </ul>
  </div>
  </div>
  </label>
  </div>
  
    <div class="yearly-box"><label for="yearly" class="container">
  <div class="yearly-header">Best Value</div>
  <div class="yearly-body">
  <div class="yearly-input"><input type="radio" id="yearly" name="payment" value="yearly">  <span class="checkmark-monthly-yearly"></span></div>
  <div class="yearly-text">
    <h2>Yearly Subscription - $474 USD <span style="color:#929292;font-weight: normal;"><s>$1,188</s></span></h2>
    <ul>
      <li>60 recorded audio lessons + live class on Zoom</li>
      <li>1-on-1 welcome call with the founder</li>
      <li>14-Day Free Trial + 90-Day Money Back Guarantee</li>
    </ul>
  </div>
  </div>
  </label>
  </div>
  
    <div class="onemonth-box"><label for="onemonth" class="container">
  <div class="onemonth-header"></div>
  <div class="onemonth-body">
  <div class="onemonth-input"><input type="radio" id="onemonth" name="payment" value="onemonth"><span class="checkmark-onemonth"></span></div>
  <div class="onemonth-text">
    <h2>Try One Month - $99 USD</h2>
  </div>
  </div>
  </label>
  </div>

</form>

<a href="" onclick='myFunction()' id="myLink">Checkout &#8594;</a>

javascript html jquery css forms

Answer 1

Answer №1

Make sure the labels are linked to the radio buttons

var labelContainers = document.querySelectorAll('.container');
labelContainers.forEach(function (container) {
    container.addEventListener('click', function () {
        // Simulate a click on the connected radio button
        var radioBtn = this.querySelector('input[type="radio"]');
        radioBtn.click();
        // Execute your function once the radio button is clicked
        myCustomFunction();
    });
});

Answer 2

Make sure the labels are linked to the radio buttons

var labelContainers = document.querySelectorAll('.container');
labelContainers.forEach(function (container) {
    container.addEventListener('click', function () {
        // Simulate a click on the connected radio button
        var radioBtn = this.querySelector('input[type="radio"]');
        radioBtn.click();
        // Execute your function once the radio button is clicked
        myCustomFunction();
    });
});

Answer 3

Answer №2

Here's another idea that just came to mind

document.addEventListener('DOMContentLoaded', function () {
    var checkboxes = document.querySelectorAll('.container');
    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('click', function () {
            // Locate the relevant checkbox
            var checkbox = this.querySelector('input[type="checkbox"]');
            
            // Toggle the checked property manually
            checkbox.checked = true;

            // Execute your function after checking the checkbox manually
            myFunction();
        });
    });
});

Answer 4

Here's another idea that just came to mind

document.addEventListener('DOMContentLoaded', function () {
    var checkboxes = document.querySelectorAll('.container');
    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('click', function () {
            // Locate the relevant checkbox
            var checkbox = this.querySelector('input[type="checkbox"]');
            
            // Toggle the checked property manually
            checkbox.checked = true;

            // Execute your function after checking the checkbox manually
            myFunction();
        });
    });
});

What is the best way to prevent the double tap event on radio buttons for mobile devices?

Answer №1

Answer №2

Similar questions

What is the best approach to configure Nuxt.js to recognize both `/` and `/index.html` URLs?

One-of-a-kind Design: Linear Gradient Background Image

Troubles encountered when populating the array within a Vue component

Retrieve image and video data by utilizing the power of Json and Ajax

How to use JQuery to retrieve multiple background image URLs from CSS styling

What is the most effective method to activate OnClientCommand from the server's perspective?

When the state inspection fails due to a missing object property, the function will not work as intended

What is causing the image to move to the following line?

Able to retrieve individual elements from an array, but not able to loop through them

Using Angular JS to submit forms on a regular basis

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

Is it possible to securely share login details on the internet?

Unable to activate animation within a nested ngRepeat loop

Querying data via AJAX from a specific Laravel route to retrieve a JSON encoded array filled with dates to populate ChartJS labels

What is the best way to create a variable in a React component that requires asynchronously loaded data in order to be functional?

Rotate object within HTML table

Implementing styling and adding a tooltipster to a select2 element that is created dynamically

Exploring the process of extracting/parsing HTML with Microdata

In what way does React export a default function that invokes another function within the same file?

What is the best way to place my website's logo in the top-left corner using html and css?