Javascript 在单选按钮选项上选择不同的div

默认情况下，我有三个单选按钮，其中没有一个被选中，并且默认情况下会显示一条消息：“通过选择选项1和2，您可以降低风险。了解更多信息”

现在，如果我选择选项1，“您无需支付任何额外费用。”应替换默认文本

如果我选择选项2或3，“您每天将支付高达[£700（中等）/1000（基本）]的额外费用。了解更多信息”£如果我选择选项2，将支付700英镑；如果我选择选项3，将支付1000英镑，替换默认文本

有人能帮我实现吗

你好，比尔

.font-weight-600{
字号：600；
}

通过选择选项1和2，您可以降低风险。
您无需支付任何额外费用。
您每天将支付高达【700英镑（中等）/1000英镑（基本）】的额外费用。
超额保费
30英镑/天
适度过量
40英镑/天
基本过剩
自由的

一种简单的方法可能是更新HTML标记，将

数据选项

属性添加到无线电输入元素中，如下所示：

<input type="radio" name="optradio" data-option="1">

.font-weight-600{
字号：600；
}
/*默认情况下，消息1、2和3是隐藏的*/
.message-1、.message-2、.message-3{
显示：无；
}

通过选择选项1和2，您可以降低风险。
您无需支付任何额外费用。
您每天将支付高达【700英镑（中等）/1000英镑（基本）】的额外费用。
您每天将支付高达【1000英镑（中等）/1000英镑（基本）】的额外费用。
超额保费
30英镑/天
适度过量
40英镑/天
基本过剩
自由的

首先，我将中度和基本多余的消息分开。然后，我在多余的消息中添加了类名。以下是基于您的代码的工作代码段：

$（'input:radio[name=“optradio”]”）。更改（函数（）{
$（'.default message、.exter message'）.hide（）；
$（'.+$（this.val（））.show（）；
});
.font-weight-600{
字号：600；
}
.多余信息{
显示：无；
}

通过选择选项1和2，您可以降低风险。
您无需支付任何额外费用。
您每天将支付高达700英镑的额外费用。
您每天将支付高达1000英镑的额外费用。
超额保费
30英镑/天
适度过量
40英镑/天
基本过剩
自由的
文本
通过选择选项1和2，可以降低风险。默认情况下应显示“了解更多信息”
。您忘记了选项2和选项3的详细信息（选项2为700英镑，选项3为1000英镑）@Dacre存在误解。默认情况下，“通过选择选项1和2，您可以降低风险。了解更多信息”应该加载。如果我选择选项1（保费超额），它应该加载“您无需支付任何超额费用”。如果我在选项2和选项3之间选择，它应该加载“您每天将支付高达[（700英镑（中等）/1000英镑（基本）]。了解更多信息”唯一的区别是，如果我选择选项2，它应该打印700英镑，而我选择选项3，它应该打印1000英镑。句子的其余部分保持不变。最后要修复的是。当我选择“适度超额”时，它应该打印“你将每天支付高达[£700]的超额。了解更多信息”。如果我选择“基本超额”，它应该打印“你每天将支付高达[£1000]的超额。了解更多信息”更新-这有帮助吗？