Question 330097 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to disable double tap event on mobile for radio buttons?

I am creating a form with radio buttons. It works fine on the computer but fails on the mobile because I have to double-tap to select a radio button. Users will get confused.

How do I disable the double-tap requirement? I’ve checked a few other answers but they’re all using different code and I’m not sure how to apply it in my situation.

Any help is much appreciated.

Here’s what I’ve got so far:

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 →</a>
Tags:

2

Answers


  1. 0

    the labels need to be associated to the radio button

    var labels = document.querySelectorAll('.container');
labels.forEach(function (label) {
    label.addEventListener('click', function () {
        // Trigger the click on the associated radio button
        var radioButton = this.querySelector('input[type="radio"]');
        radioButton.click();
        // Call your function after the radio button is clicked
        myFunction();
    });
});```
    Login or Signup to reply.
  2. 0

    i have one more idea actually

    document.addEventListener('DOMContentLoaded', function () {
    var labels = document.querySelectorAll('.container');
    labels.forEach(function (label) {
        label.addEventListener('click', function () {
            // Find the associated radio button
            var radioButton = this.querySelector('input[type="radio"]');
            
            // Manually set the checked property
            radioButton.checked = true;

            // Call your function after the radio button is manually checked
            myFunction();
        });
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search