Javascript 使用多个单选按钮和ID显示/隐藏ID

所以我遇到了一个小问题。我正在制作一个根据用户需要更改的联系表单

这是我的html代码。我的目标是首先，用第一组raio按钮隐藏大部分内容。事实上，我通过以下Javascript实现了这一点：

$（函数（）{
$（“#报告”）。在（'click'，function（）上{
如果（$（this）.is（':checked'））{
$（'#phonenumber'）.hide（）；
$（“#播放日期”）.hide（）；
$（'#customertype'）.hide（）；
$（“#学生价格”）.hide（）；
$（“#privateprices”）.hide（）；
$（“#公司价格”）.hide（）；
$（'#customsetup'）.hide（）；
}否则{
$（'#phonenumber'）.show（）；
$（“#播放日期”）.show（）；
$（'#customertype'）.show（）；
$（“#学生价格”）.show（）；
$（“#privateprices”）.show（）；
$（“#公司价格”）.show（）；
$（'#customsetup'）.show（）；
}
})
$（'#booking'）。在（'单击'，函数（）上）{
如果（$（this）.is（':checked'））{
$（'#phonenumber'）.show（）；
$（“#播放日期”）.show（）；
$（'#customertype'）.show（）；
$（“#学生价格”）.show（）；
$（“#privateprices”）.show（）；
$（“#公司价格”）.show（）；
$（'#customsetup'）.show（）；
}否则{
$（'#phonenumber'）.hide（）；
$（“#播放日期”）.hide（）；
$（'#customertype'）.hide（）；
$（“#学生价格”）.hide（）；
$（“#privateprices”）.hide（）；
$（“#公司价格”）.hide（）；
$（'#customsetup'）.hide（）；
}
})
$（'#student'）。在（'click'，function（）上{
如果（$（this）.is（':checked'））{
$（“#privateprices”）.hide（）；
$（“#公司价格”）.hide（）；
}否则{
$（“#privateprices”）.show（）；
$（“#公司价格”）.show（）；
}
})
});

预订表
当页面仍在开发中时，请定义您的查询：
错误报告
预订
名字：
姓氏：
电子邮件
电话：
活动日期：
写一条快速消息：
特技演员/学徒
私有的
单位
最小的
只有声音
声与光
全部派对套餐
习俗
最小的
只有声音
声与光
全部派对套餐
习俗
最小的
只有声音
声与光
全部派对套餐
习俗
自定义选项：
演讲者
低音炮
照明
闪光灯
雾机
桌子
这是一支笔，写的是我该怎么做

在这支笔中，我将
报告组
和
预订组
的类添加到相应的
div
s中，将
隐藏组
的类添加到css中，设置为
显示：无
，然后根据选中的单选按钮添加和删除类
隐藏组
。我还将html中的类
hide group
添加到最初需要隐藏的div中

我没有将组添加到每个div中。仅足以显示您需要执行的操作。
您可以检查在页面加载中选择的单选按钮，并显示/隐藏面板。请看这里的工作小提琴：


我试过你的方法。它在JSFIDLE中运行良好，但当使用引导css实现到我的表单中时，它似乎会干扰jquerymobile框架。它最终改变了单选按钮的布局。只有第一个单选按钮有效。请你能分享你的js小提琴。我很困惑。代码在JSFIDLE中工作。当实现到我的页面时，它不起作用。这是我的提琴：你的提琴很好用。。希望你解决了这个问题。我为这件事感到非常抱歉。为了找到问题，我决定将我的页面拼凑成一个html文件，而不是使用include函数拆分成php文件。结果是页面本身肯定有问题，我无法识别。我将整个页面插入到JSFIDLE中。也许你或其他人能够找到错误。
$('#student').on('click', function() {
     if ($(this).is(':checked')) {
        $("#studentprices").show();
        $('#privateprices, #companyprices').hide();
   }
});
$('#private').on('click', function() {
    if ($(this).is(':checked')) {
        $("#privateprices").show();
        $('#studentprices, #companyprices').hide();
    }
});
 $('#company').on('click', function() {
    if ($(this).is(':checked')) {
        $("#companyprices").show();
       $('#studentprices, #privateprices').hide();
    }
});