Href page navigation is not working with radio(input) button

Question

I've created some radio buttons in a single webpage at different section. I want when one of the radio button is clicked in first section then page will jump to next section for another radio button's question . I have covered the input and label elements with a tag but it is not redirecting to next section. below are my codes

HTML codes

 <!--section1 /first radio button start-->
    <div id="section1">enter code here
    <!---section heading--->
      <h2 class="text-center">I am looking for an</h2>
    <!---radio buttons --->  
      <div class="row">
       <div class="col-2 notmobile"></div>
         <div class="col-lg-4 col-md-6 col-sm-6 col-6">
            <a href="#section2">
            <input class="check-with-label" type="radio" id="interior" name="firstradio" checked>
              <label class="myradio" for="interior">
                 <span>Interior Designer</span>    
              </label> 
             </a>
            </div>
           <div class="col-lg-4 col-md-6 col-sm-6 col-6">
            <a href="#section2">
            <input class="check-with-label" type="radio" id="architect" name="firstradio">
              <label class="myradio" for="architect"> 
                 <span>Architect</span>  
              </label>
            </a>
           </div>
          <div class="col-2 notmobile"></div>
        </div>
       <!---first radio close--> 
    </div>
     <!--section1 /first radio button end-->
     <!--section2 /second radio button start-->
     <div id="section2" name="section2">
     <!---section heading--->
      <h2 class="text-center">The designer would work on my</h2>
    <!---second radio buttons --->  
      <div class="row">
         <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="home" name="sectradio" checked>
             <label class="myradio" for="home">
                 <span>Home</span>
             </label>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="office" name="sectradio">
              <label class="myradio" for="office"> 
                 <span>Office</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="hotel" name="sectradio">
              <label class="myradio" for="hotel"> 
                 <span>Hotel</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="showroom" name="sectradio">
              <label class="myradio" for="showroom"> 
                 <span>Showroom</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="restaurant" name="sectradio">
              <label class="myradio" for="restaurant"> 
                 <span>Restaurant</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="shop" name="sectradio">
              <label class="myradio" for="shop"> 
                 <span>Shop</span>
              </label>
           </div>
        </div>
       <!---second radio close-->
      </div>
    <!--section2 /second radio button end-->

css codes

#section1{
  height:100vh;
}
#section2{
 height:100vh;
}
.myradio{
    background-color: rgba(1.6%,1.6%,1.6%,0.4);
    height:110px;
    width: 100%;
    border-radius: 9px;
    padding: 30px;
    color: rgba(242,237,237,0.4);
    line-height:40px;
    font-size: 28px;
    font-weight: 200;
    text-align: center;
}
.check-with-label{
    display: none;
}
.check-with-label:checked + .myradio {
   background-color: rgba(204,204,204,0.2);
   color: white;
}

just want when a radio button is selected in first section the page should jump to second section for another radio options. any help regarding this will make me happy please.

Answer 1

I can suggest 2 solutions:

A) linking only the label

Move the <a> tag inside <label>, that works.

<input class="check-with-label" type="radio" id="interior" name="firstradio" checked>
<label class="myradio" for="interior">
  <a href="#section2">
    <span>Interior Designer</span>
  </a>
</label>

B) using jQuery

Add a class to your <a> tag (e.g. clickRadio), then with jQuery add a click event handler to these links where you read the href attribute and move the scroll position to the anchor position.

$('.clickRadio').click(function() {
    var id = $(this).attr('href');
    $(document).scrollTop($(id).offset().top);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a class="clickRadio" href="#section2">
    <input class="check-with-label" type="radio" id="interior" name="firstradio" checked>
    <label class="myradio" for="interior">
            <span>Interior Designer</span>
    </label>
</a>

<div id="section2"></div>

If you want to slow down the scroll movement, you can use this JS code:

$('.clickRadio').click(function() {
    var id = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(id).offset().top
    }, 500); // <-- animation duration in milliseconds
})