如何基于是否仅使用css选中单选按钮来显示/隐藏div

我试图根据是否选中单选按钮来显示/隐藏div。div在页面的一个单独部分中的输入按钮之后，我很难引用它们

代码是用于嵌入捐赠表单的，因此我实际上无法更改html。我只能更改css

下面是一个指向JSFIDLE的链接，其中包含相关代码：

我已经看过好几篇关于兄弟元素或子元素的文章，但是这些解决方案都不适用于我的不太直接相关的元素。我也知道我的~连接器不准确，但我把它作为占位符放在那里了。谢谢你的帮助

以下是相关的html：

div#IATS#u PaymentItemDiv#u注释，
部门付款项目部门付款项目2{
显示：无；
}
输入#IATS#金额#订单#2：选中~div#IATS#付款项目div#注释{
显示：块；
}
输入#IATS#U金额(U订单)2：选中~div#IATS#U付款项目div#U项目2{
显示：块；
}

加入塞拉雪崩中心*
$35
+
-
$50
+
-
$100
+
-
$250
+
-
$500
+
-
输入量必须大于
最低限度
总额：100美元
请至少选择一个
金额项目。
付款信息必须输入粗体字段
什么尺寸和性别的T恤？
需要评论
请选择您的感谢礼物
-挑选
我想把我全部的捐款捐给SAC
T恤+网眼运动帽
T恤+遮阳板
T恤+卡车司机帽
项目2是必需的

您可以使用CSS选择器，这里是一个示例

你的文字
输入[类型=复选框]+标签{
颜色：#ccc；
字体：斜体；
} 
输入[类型=复选框]：选中+标签{
颜色：#f00；
显示：无；/*隐藏元素*/
字体风格：普通；
}

<input type="checkbox" id="test" name="test"> 
<label for="test">your text</label>



input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
    display: none; /* HIDE YOUR ELEMENT */
  font-style: normal;
}