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.

add jquery code too – Alive to die - Anant Sep 06 '17 at 17:06 — Alive to die - Anant, Sep 06 '17 at 17:06
could you please tell me which code I should write? – T.mandal Sep 06 '17 at 17:23 — T.mandal, Sep 06 '17 at 17:23

juzraai · Accepted Answer · 2017-09-07T07:47:44.933

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
})

Thank you so much.I solved my problem within 20mints.Thank you so much :) — T.mandal, Sep 06 '17 at 17:31
can you tell me how to control the navigation duration. I mean I just want to navigate the next section with little animation — T.mandal, Sep 07 '17 at 05:35

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

1 Answers1