如何单击收音机然后显示 div 或隐藏

Question

when I onclick the radio,

how can display or hidden the div?

because I writing this code, it cannot work.

<div class="col-12 gap-24"><div class="row"><span class="col-2"><input class="" type="radio" name="payway" value="5" οnclick="myFunction();">Store</span></div></div>
              </div>

              <script>
              function myFunction() {
                var check_pick = document.getElementById("check_pick");
                var check_pick1 = document.getElementById("check_pick1");
                if (check_pick.style.display === "none") {
                  check_pick.style.display = "block";
                } else {
                  check_pick.style.display = "none";
                }
                if (check_pick1.style.display === "none") {
                  check_pick1.style.display = "block";
                } else {
                  check_pick1.style.display = "none";
                }
              }
              </script>


              <label class="h4" name="check_pick" id="check_pick">Pick up method</label>
              <div class="row_4 border" name="check_pick1" id="check_pick1">

Answer 1

set up your listener after window has loaded

 window.onload = function() { /* you can assign a listener like this: var radio = document.getElementById('radio'); radio.onclick = myFunction; or like this: */ document.getElementById("radio").addEventListener("click", myFunction); var check_pick = document.getElementById("check_pick"); check_pick.style.display='none' var check_pick1 = document.getElementById("check_pick1"); check_pick1.style.display='none' } function myFunction() { var check_pick = document.getElementById("check_pick"); var radio = document.getElementById("radio"); var check_pick1 = document.getElementById("check_pick1"); if (check_pick.style.display === "none") { check_pick.style.display = "block"; } else { check_pick.style.display = "none"; radio.checked = false } if (check_pick1.style.display === "none") { check_pick1.style.display = "block"; } else { check_pick1.style.display = "none"; } }

 #check_pick,#check_pick1{ display:none;}

 <div class="col-12 gap-24"> <div class="row"> <input id='radio' type="radio" name="payway" value="5" />Store </div> </div> <label class="h4" name="check_pick" id="check_pick">Pick up method</label> <div class="row_4 border" name="check_pick1" id="check_pick1">xxx</div>

Answer 2

The really nasty problem with the posted code is the presence of the greek letter ο , namely a greek omicron character in lower case, in the attribute value οnclick="myFunction() . This stops the onclick attribute being recognized without generating an error:

 console.log( 'οnclick="myFunction();"' === 'onclick="myFunction();"' ); console.log("0x0" + 'οnclick="myFunction();"'.charCodeAt(0).toString(16));

You may wish to investigate where the omicron came from. Hopefully it was caused by selecting the wrong keyboard language when originally typed in.