使用单选按钮显示特定选项？

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的本地副本（因为您没有Internet访问权限），要么只需从托管服务器加载它（如果您具有Internet访问权限）。 在此处进行快速测试 。

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>