Javascript 当收音机输入=选中时更改边框

我得到了一个带有图标的标签，该图标多次与输入“连接”，因此我的html看起来像：

<label for="gutschein" class="col-md-3 row border mx-md-auto p-3">
   <span class="col iconify" data-icon="mdi:credit-card-plus-outline" data-inline="false">Gutschein</span>
   <h5 class="col pt-3">Gutschein</h5>
</label>
<input type="radio" id="gutschein" name="betrag" style="visibility:hidden ;" />

<label for="spenden" class="col-md-3 row border mx-auto p-3">
  <span class="col iconify" data-icon="fa-solid:donate" data-inline="false"></span>
  <h5 class="col pt-3">Spenden</h5>
</label>
<input type="radio" id="spenden" name="betrag" style="visibility: hidden;" />

我尝试了一些JS函数，但没有任何效果，我还尝试在输入=选中时设置一个类，如

gift\u value:checked:after或gift\u value:focus

，但没有成功。

---

有什么特别的把戏吗？查找代码

如果更改html的

标签

和

输入

元素的顺序，可以使用

+

将样式应用于相应的标签

Html:

---

也许这就是你要找的？您可能不需要使用脚本就可以做您想做的事情。您是否可以创建一段脚本，因为我在上面看不到任何输入UI，因为您正在使用外部库来实现您的目标

.gift_value {
            background: var(--blue);
            color: white;
            text-align: center;
            border-radius: 5px;
        }

<input type="radio" id="gutschein" name="betrag" style="visibility:hidden ;" />
<label for="gutschein" class="col-md-3 row border mx-md-auto p-3">
    <span class="col iconify" data-icon="mdi:credit-card-plus-outline" data-inline="false">Gutschein</span>
    <h5 class="col pt-3">Gutschein</h5>
</label>


<input type="radio" id="spenden" name="betrag" style="visibility: hidden;" />
<label for="spenden" class="col-md-3 row border mx-auto p-3">
    <span class="col iconify" data-icon="fa-solid:donate" data-inline="false"></span>
    <h5 class="col pt-3">Spenden</h5>
</label>

input:checked + label {
        background: var(--blue);
        color: white;
        text-align: center;
        border-radius: 5px;
    }