ラジオボタンを使用して特定のオプションを表示しますか？

Question

私はこの質問が数回答えられていることを知っており、答えも見つけました。しかし、このコードは私が作ろうとしているウェブサイトでは機能していないようです。それは静的なページであり、インターネットなしで動作するはずです。私はいくつかの機能を定義するためには欠けていると思う。助けてください！あなたのコードから

<form> 
 
<input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input> 
 
<input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input> 
 
<input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input> 
 
<input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input> 
 
<br>  
 
<div id="ar_1" style="display:none;"> 
 
<p>info for option1</p> 
 
</div> 
 
<div id="ar_2" style="display:none;"> 
 
<p>info for option2</p> 
 
</div> 
 
<div id="ar_3" style="display:none;"> 
 
<p>info for option3</p> 
 
</div> 
 
<div id="ar_4" style="display:none;"> 
 
<p>info for option4</p> 
 
</div> 
 
</form> 
 
<script> 
 
$(document).ready(function() {  
 
    $('#id_radio1').click(function() { 
 
     $('#ar_1').show('fast'); 
 
     $('#ar_2').hide('fast');   
 
     $('#ar_3').hide('fast'); 
 
     $('#ar_4').hide('fast'); 
 
    }); 
 
    $('#id_radio2').click(function() { 
 
     $('#ar_1').hide('fast'); 
 
     $('#ar_2').show('fast'); 
 
     $('#ar_3').hide('fast'); 
 
     $('#ar_4').hide('fast'); 
 
    }); 
 
    $('#id_radio3').click(function() { 
 
     $('#ar_1').hide('fast'); 
 
     $('#ar_2').hide('fast'); 
 
     $('#ar_3').show('fast'); 
 
     $('#ar_4').hide('fast'); 
 
    }) 
 
    $('#id_radio4').click(function() { 
 
     $('#ar_1').hide('fast'); 
 
     $('#ar_2').hide('fast'); 
 
     $('#ar_3').hide('fast'); 
 
     $('#ar_4').show('fast'); 
 
    }) 
 
}); 
 
</script>

Answer 1

、あなたはjQueryのライブラリを使用しているように見えます。ただし、コードのどこにもインポートはありません。あなたのために、このように動作するコード。 JQueryのローカルコピー（インターネットアクセスがないため）を含めるか、ホストされたサーバーから（インターネットアクセスがある場合）ロードするだけです。 Quick-Test it Here。

JAVASCRIPT：

<!-- LOCAL JQUERY INCLUDED IN SCRIPT TAG FIRST --> 
<script type="text/javascript" src="assets/js/jquery.js"></script> 

<!-- OR PULLED FROM HOSTED CDN: DELETE THIS OPTION IF YOU HAVE NO INTERNET ACCESS --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 


<script type="text/javascript"> 
    (function($){ 
     $(document).ready(function(evt){ 
      $('#id_radio1').click(function() { 
       $('#ar_1').show('fast'); 
       $('#ar_2').hide('fast'); 
       $('#ar_3').hide('fast'); 
       $('#ar_4').hide('fast'); 
      }); 

      $('#id_radio2').click(function() { 
       $('#ar_1').hide('fast'); 
       $('#ar_2').show('fast'); 
       $('#ar_3').hide('fast'); 
       $('#ar_4').hide('fast'); 
      }); 

      $('#id_radio3').click(function() { 
       $('#ar_1').hide('fast'); 
       $('#ar_2').hide('fast'); 
       $('#ar_3').show('fast'); 
       $('#ar_4').hide('fast'); 
      }); 

      $('#id_radio4').click(function() { 
       $('#ar_1').hide('fast'); 
       $('#ar_2').hide('fast'); 
       $('#ar_3').hide('fast'); 
       $('#ar_4').show('fast'); 
      }) 

     }); 
    })(jQuery); 

</script> 

はHTML：

<form> 
     <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input> 
     <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input> 
     <input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input> 
     <input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input> 
     <br> 
     <div id="ar_1" style="display:none;"> 
      <p>info for option1</p> 
     </div> 
     <div id="ar_2" style="display:none;"> 
      <p>info for option2</p> 
     </div> 
     <div id="ar_3" style="display:none;"> 
      <p>info for option3</p> 
     </div> 
     <div id="ar_4" style="display:none;"> 
      <p>info for option4</p> 
     </div> 
    </form>