Javascript 如何根据单选按钮选择使表单元素的行为不同

我是网络开发新手。我正在创建一个新的应用程序，其中我正在设计一个表单，其中元素根据radiobuttonlist的选择而有所不同。 比如说- 我有单选按钮列表- 性别和选择是男性和女性

对于男性： 表格的下一个元素是文本字段课外活动：，学生可以键入柔道、空手道等任何内容

女性： 表单的下一个元素是下拉菜单课外活动：有舞蹈、芭蕾舞等选项 根据以上单选按钮的选择，应显示下一个元素，输入的数据将转换为JSON格式并存储在数据库中

现在，为了实现这一点，我在一个div中放置了与dropdownlist相同的字段，在另一个div中放置了textfield。我使用jQuery分别隐藏和显示div。 我希望ID和名称相同的文本字段在两种不同的场景中根据单选按钮的选择表现不同

课外活动被用作男性儿童的文本字段，女性儿童的下拉列表。最终，来自同一元素（文本字段或下拉列表）的值应输入数据库。

我做得对吗。
代码-

$(document).ready(function () {    
    $('#id_radio1').click(function () {
        $('#multi_language').hide('fast');
        $('#single_language').show('fast');
    });
    $('#id_radio2').click(function () {
        $('#single_language').hide('fast');
        $('#multi_language').show('fast');
    });
});

HTML

<form>
    <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" >Single</input> 
    <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Multi</input>
    <br />    
    <div id="single_language" style="display:none;">
        <p>One</p>
    </div>
     <div id="multi_language" style="display:none;">
        <p>Two</p>
    </div>


</form>

单身
多个


一个

两个

我以前遇到过这样的事情。您可以使用

append（）

根据单选按钮的选择动态生成元素，也可以根据需要在页面加载和

detach（）/remove（）

上创建元素

---

我命名的函数在jQuery中。您可以使用与此类似的javascript。

请发布一个fiddle链接或您的html和脚本。我已经发布了。为什么会有这么多选票。我在问一个问题