кнопки и тумблер не работает в мобильном браузере

Question

Я создал этот тумблер с помощью css. Он отлично работает в браузере ПК (как Chrome, так и Firefox), но не работает в мобильных браузерах, т. Е. Если я нажимаю на переключатели, он не переключается между включением и выключением в мобильном браузере. Даже когда я нажимаю на кнопку, на нее не нажимают. Я прочитал много статей, но я не получил никакого решения с помощью JavaScript. Я также изучил события касания, но когда я его использую, проблема все еще существует.

Это код CSS для тумблеров:

 <style>
       .switch input { 
        display:none;
    }
    .switch {
        display:inline-block;
        width:37px;
        height:18px;
        margin:8px;
        transform:translateY(50%);
        position:relative;
    }

    .slider {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        border-radius:15px;
        box-shadow:0 0 0 2px #777, 0 0 4px #777;
        cursor:pointer;
        border:4px solid transparent;
        overflow:hidden;
         transition:.4s;
    }
    .slider:before {
        position:absolute;
        content:"";
        width:100%;
        height:100%;
        background:#777;
        border-radius:15px;
        transform:translateX(-15px);
        transition:.4s;
    }

    input:checked + .slider:before {
        transform:translateX(15px);
        background:limeGreen;
    }
    input:checked + .slider {
        box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
    }
    </style>

Это HTML-код для переключения и кнопки:

  <div>
            <label class="switch">
                <input type="radio" name="subject[]" value="Subject-1" id="Check"  onclick="Function()">
                <span class="slider"></span>
            </label>
        </div>

    <div>
            <label class="switch">
                <input type="radio" name="subject[]" value="Others"  id="myCheck"  onclick="Function1()">
                <span class="slider"></span>
            </label>
        </div><br>
        <div id="text" style="display:none">
       <input type="text" class="wp-form-control wpcf7-text" style="border-color:#C0C0C0;" placeholder="Mention which subject you want" name="sub"></div>
        <br>
        <input type="submit" value="Submit" name="submit" class="wpcf7-submit"><br><br>
          </div>

Это часть JavaScript для функции onclick:

 document.getElementById("myCheck").addEventListener("touchstart", Function);
    function Function() {
         if (document.getElementById('myCheck').checked) {
            document.getElementById('text').style.display = 'block';
        }
        else document.getElementById('text').style.display = 'none';    
    }

Есть ли какое-нибудь решение для JavaScript? Какие изменения я должен сделать? Что не так с этим кодом?

Answer 1

Вы пытались не использовать подъем , не каждый двигатель эффективен с этим. Я предлагаю вам изменить свой javascript на:

document.getElementById("myCheck").addEventListener("touchstart", function() {
  if (document.getElementById('myCheck').checked) {
    document.getElementById('text').style.display = 'block';
  }
  else document.getElementById('text').style.display = 'none';    
});

Также в вашем html есть myCheck и Check, обязательно проверьте правильность.