Javascript 从单选按钮显示Div（带提交按钮）

我需要帮助。我还不熟悉jQuery，我可以在没有submit按钮时显示div，但是当我添加submit按钮时，我无法根据单选按钮获取div

$（文档）.ready（函数（）{
$（“.result”）。单击（函数（）{
$（“输入[name=expectation]”）。更改（函数（）{
var expectedValue=$（this.val（）；
$（“.box”）.hide（）；
$（“#”+expectedValue）.show（）；
});
});
});
.box{
显示：无；
}

波浪发


健康的头发


使头发丝滑


提交
波浪发产品
护发产品
用于丝质头发的产品
您不能有具有相同id的多个元素

，即：radio和div具有相同id。因此，您可以使用

data-atribute

，而不是id。然后您可以更改选择器，如

$（“div[data-id=“+expectedValue+”]）

，以显示div

演示代码：

$（文档）.ready（函数（）{
$（“输入[name=expectation]”）。更改（函数（）{
var expectedValue=$（this.val（）；
$（“.box”）.hide（）；
console.log（expectedValue）
//使用数据id
$（“div[data id=“+expectedValue+”]）。show（）；
});
});
.box{
显示：无；
}

波浪发


健康的头发


使头发丝滑


提交
波浪发产品
护发产品
用于丝质头发的产品
只有在单击按钮后才能显示div的内容。为什么会有这样的概念

我提出了两种解决办法。在第二个解决方案中，不单击按钮。你需要什么概念？它应该如何工作

使用
each（）
方法，传递索引


$（文档）.ready（函数（）{
$（“.result”）。单击（函数（）{
$（“输入[名称=期望]”）。每个（函数（索引）{
$（this）.change（function（）{
var expectedValue=$（this.val（）；
$（“.box”）.hide（）；
$（“.box”）.eq（index.show（）；
});
});
});
});
.box{
显示：无；
}

波浪发


健康的头发


使头发丝滑


提交
波浪发产品
护发产品
用于丝质头发的产品