Javascript 作为div的无线电输入

在下面的代码片段中，您将看到我正在设计一个单选按钮的样式，使其看起来像一个按钮。我希望这些按钮能像单选按钮在正常状态下一样工作。现在，两个单选按钮都在页面加载时使用我的javascript中的

active

类。只有选择了它们，才会发生这种情况

此外，在单选按钮下产生额外输入的

if语句中的
fadeToggle
的功能如同单选按钮是复选框一样。我必须点击同一个按钮两次才能取消激活。我认为这是基于上述问题

有人知道我做错了什么吗


var rsvpAns=$（'.radioTransform'）；
rsvpAns.click（函数（）{
$（'.radio'，this.prop（'checked'），！$（'.radio'，this.prop（'checked'））.change（）；
var radioCheck=$（'.radio'，this.val（）；
$（'.radioTransform'，this.toggleClass（'active'）；
控制台日志（无线电检查）；
如果（radioCheck==“是”）{
$（#ansYes'）。fadeToggle（400）；
}
});
收音机{
显示：无；
}
#推手{
右边距：25px；
}
.无线电变换{
宽度：220px；
显示：内联块；
垂直对齐：顶部；
背景：#dbc8ca；
光标：指针；
填充：15px0；
}
.radioTransform.active{
背景：红色；
}
.无线电应答{
字体系列：“开放式Sans”，无衬线；
字体大小：.9rem；
文本对齐：居中；
}
#安塞斯{
显示：无；
}

对
不
你好吗？
只有在单击“是”按钮时，if条件块才起作用。然后，如果您单击“否”，对于此条件，您可以使用else语句。在此代码
radioTransform
div中，没有加载活动类


var rsvpAns=$（'.radioTransform'）；
rsvpAns.click（函数（）{
$（'.radio'，this.prop（'checked'），！$（'.radio'，this.prop（'checked'））.change（）；
var radioCheck=$（'.radio'，this.val（）；
控制台日志（无线电检查）；
$（this.toggleClass（'active'）；
如果（radioCheck==“是”）{
$（#ansYes'）。fadeToggle（400）；
if（$（this）.next（'.radioTransform'）.hasClass（'active'））{
$（this）.next（'.radioTransform'）.removeClass（'active'）；
}
}否则{
$（'ansYes'）。淡出（400）；
if（$（this）.prev（'.radioTransform'）.hasClass（'active'））{
$（this）.prev（'.radioTransform'）.removeClass（'active'）；
}
}
});
收音机{
显示：无；
}
#推手{
右边距：25px；
}
.无线电变换{
宽度：220px；
显示：内联块；
垂直对齐：顶部；
背景：#dbc8ca；
光标：指针；
填充：15px0；
}
.radioTransform.active{
背景：红色；
}
.无线电应答{
字体系列：“开放式Sans”，无衬线；
字体大小：.9rem；
文本对齐：居中；
}
#安塞斯{
显示：无；
}

对
不
你好吗？
您根本不需要Javascript，只需要一些智能CSS和对标记的轻微重组。此更改甚至会增加解决方案的语义价值和可访问性

我只为一些console.logging添加了Javascript，这样您就可以看到代码片段是有效的

请注意，为了使单选按钮像预期的那样工作，它们需要共享
name
属性，否则两者都可以“打开”


const radios=Array.from（document.querySelectorAll（'[name=“yesno”]'））
用于（无线电的常数无线电）{
radio.addEventListener（'change'，function（）{
value.textContent=document.querySelector（'[name=“yesno”]：选中'）。值
})
}
收音机{
显示：无；
}
.无线电应答{
宽度：220px；
显示：内联块；
垂直对齐：顶部；
背景：#dbc8ca；
光标：指针；
填充：15px0；
过渡时间：.4s；
位置：相对位置；
}
.无线电回答：：之前{
显示：内联块；
内容：“；
边框宽度：0 2px 2px 0；
边框颜色：透明；
边框样式：实心；
宽度：0；
身高：0；
过渡：宽度。4s线性。1s，
高度：2s线性1.6s；
位置：绝对位置；
左：10px；
最高：50%；
变换：旋转（35度）translateY（-50%）；
变换原点：中间偏右；
}
输入[类型=无线电]：选中+无线电应答{
背景：#0a0；
颜色：#fff；
}
输入[类型=无线电]：选中+。无线电应答：：之前{
边框颜色：#fff；
变换：旋转（35度）translateY（-50%）；
高度：1.5em；
宽度：.8em；
过渡：全部。4s线性0，宽度。4s线性。1s，高度。2s线性。3s
；位置：绝对位置；
}
.无线电应答{
字体系列：“开放式Sans”，无衬线；
字体大小：.9rem；
文本对齐：居中；
}

对
不
所选值：
为了实现单选按钮与背景的切换效果，
$（“.radioTransform”，this）。toggleClass（'active'）是不够的

首先，考虑到它已经在连接到
$（'.radioTransform'）
的单击处理程序中，当您添加
this
作为
$（'.radioTransform'）this.toggleClass（'active'）的第二个参数时
您告诉它在
.radioTransform
中查找
.radioTransform
，因为您将
.radioTransform
设置为选择器的上下文，这就是它不更改颜色的原因。即使你删除了
这个
，你也会为每一个
.radioTransform
都切换这个类（我写了多少次
radioTransform
？：）

第二，将
背景：红色
从
.radioTransform
中移除，当它不处于活动状态时，否则您将永远看不到它发生


var rsvpAns=$（'.radioTransform'）；
rsvpAns.click（函数（）{
$（'.radio'，this.prop（'checked'），！$（'.radio'，this.prop（'checked'））.change（）；
var radioCheck=$（'.radio'，this.val（）；
$（this.toggleClass（'active'）；
$（this）.sides（'.radioTransform'）.toggleClass（'active'，！$（this）.hasClass(