使用單選按鈕顯示特定選項？

我知道這個問題已經回答了幾次，我也找到了答案。然而，代碼似乎並沒有工作，我試圖做的網站。這是一個靜態頁面，應該沒有互聯網工作。我想我缺少定義一些功能。請幫忙！使用單選按鈕顯示特定選項？

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

來源

2016-09-25 Avi

這聽起來很明顯，但jQuery的加載在你的頁面？ –

請拼寫檢查您的帖子標題。另外，請用標準的國際英語寫。這意味着把一個句子的第一個單詞變大寫，並用句號（句點）結束句子。也大寫「I」這個詞。請修復此問題，謝謝。 – 2016-09-25 13:55:42

您需要告訴我們什麼不起作用，以及您的調試結果如何，例如用調試器遍歷代碼。 – 2016-09-25 13:56:36

從您的代碼，你似乎可以用jQuery庫。但是，您無法在代碼中的任何位置導入數據。因爲你的代碼就這樣工作了;您必須包含JQuery的本地副本（因爲您沒有Internet訪問權限），或者只需從託管服務器（如果您擁有Internet訪問權限）加載它即可。 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>

來源

2016-09-25 13:58:01 Poiz

與jQuery導入相關的解決方案工作。感謝您的幫助！ – Avi

使用單選按鈕顯示特定選項？

回答

相關問題