Hrefページナビゲーションがラジオ（入力）ボタンで機能しない

Question

異なるセクションの単一のWebページにラジオボタンをいくつか作成しました。 最初のセクションでラジオボタンの1つがクリックされると、別のラジオボタンの質問のページが次のセクションにジャンプします。 入力とラベル要素をタグでカバーしましたが、次のセクションにリダイレクトされません。以下の私のコードは

HTMLコード

<!--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コード

#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; 
} 

はちょうどラジオボタンが最初のセクションで選択されている場合、ページが別のための第二のセクションにジャンプする必要がありますしたいですラジオオプション。 これについての助けが私を喜ばせてくれます。働くこと、<label>内<a>タグを移動し

A）のみラベル

リンク：

Answer 1

私は2つのソリューションを提案することができます。その後、jQueryを使って、あなたが読んで、これらのリンクにクリックイベントハンドラを追加し、あなたの<a>タグ（例えばclickRadio）にクラスを追加jQueryの

を使用して

<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） href属性を使用し、スクロール位置をアンカー位置に移動します。

$('.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>

あなたは、スクロールの動きを遅くしたい場合は、this JSコードを使用することができますjqueryのコードを追加し

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