Javascript 单击标签时选中/取消选中无线电输入

我正在创建一个客户偏好部分，客户可以通过单击两个单选按钮中的一个来选择是否对水果感兴趣。问题是，我想通过允许空单选按钮/再次单击时取消选中单选按钮，允许客户在水果上保留其未定义的偏好

JS只是将类添加到通过php加载的单选按钮中，并使用checked=“checked”将类添加到CSS的父标签中，因为在前端它显示为一个按钮组，如下所示： 我试图查找堆栈溢出，但没有解决方案

$（'input:not（：checked'）.parent（）.removeClass（“radio_checked”）；
$（'input:not（：checked'）。删除TTR（“checked”）；
$（'input:checked'）.parent（）.addClass（“radio_checked”）；
$（'input'）。单击（函数（）{
$（'input:not（：checked'）.parent（）.removeClass（“radio_checked”）；
$（'input:not（：checked'）。删除TTR（“checked”）；
$（'input:checked'）.parent（）.addClass（“radio_checked”）；
});
#客户偏好表{
边缘顶部：50px；
右翼：6.5%；
}
.container_香蕉、.container_苹果、.container_番石榴、.container草莓、.container菠萝、.container芒果{
左缘：6.5%；
边缘顶部：20px；
宽度：43.5%；
浮动：左；
边框：1px纯灰！重要；
边界半径：6px；
填充：0！重要；
溢出：隐藏；
}
.字段名称{
边框底部：1px纯色灰色！重要；
边距：0！重要；
填充：5px15px；
显示：内联块；
宽度：100%；
浮动：左；
}
.field_标题标签{
文本对齐：居中；
字体大小：18px！重要；
字体大小：正常！重要；
利润率：0.03倍；
宽度：100%！重要；
显示：内联块；
游标：默认！重要；
}
#客户首选项表单标签{
宽度：50%；
显示：内联块；
浮动：左；
文本对齐：居中；
填充：5px0px；
光标：指针；
}
#客户首选项表单标签：第n个子项（2）{
右边框：1px纯黑；
}
#客户偏好\u表单输入[type=“radio”]{
显示：无；
}
#客户偏好表。无线电检查{
颜色：#00d8a9；
背景：#FAFAFA；
字体大小：粗体；
}

芒果
不感兴趣
我的最爱！
菠萝
不感兴趣
我的最爱！
检查这个，它正在工作


$（'input:not（：checked'）.parent（）.removeClass（“radio_checked”）；
$（'input:not（：checked'）。删除TTR（“checked”）；
$（'input:checked'）.parent（）.addClass（“radio_checked”）；
$（'input:checked'）.parent（）.addClass（“selected”）；
$（'input'）。单击（函数（）{
$（'input:not（：checked'）.parent（）.removeClass（“radio_checked”）；
$（'input:not（：checked'）.parent（）.removeClass（“selected”）；
$（'input:not（：checked'）。删除TTR（“checked”）；
$（'input:checked'）.parent（）.addClass（“radio_checked”）；
$（'input:checked'）.parent（）.addClass（“selected”）；
});
$（'input[type=radio]'）。隐藏（）
#客户偏好表{
边缘顶部：50px；
右翼：6.5%；
}
.香蕉，
.苹果，
.番石榴，
.草莓，
.菠萝，
.芒果{
左缘：6.5%；
边缘顶部：20px；
宽度：43.5%；
浮动：左；
边框：1px纯灰！重要；
边界半径：6px；
填充：0！重要；
溢出：隐藏；
}
.字段名称{
边框底部：1px纯色灰色！重要；
边距：0！重要；
填充：5px15px；
显示：内联块；
宽度：100%；
浮动：左；
}
.field_标题标签{
文本对齐：居中；
字体大小：18px！重要；
字体大小：正常！重要；
利润率：0.03倍；
宽度：100%！重要；
显示：内联块；
游标：默认！重要；
}
#客户首选项表单标签{
宽度：50%；
显示：内联块；
浮动：左；
文本对齐：居中；
填充：5px0px；
光标：指针；
}
#客户首选项表单标签：第n个子项（2）{
右边框：1px纯黑；
}
#客户偏好\u表单输入[type=“radio”]{
显示：无；
}
#客户偏好表。无线电检查{
颜色：#00d8a9；
背景：#FAFAFA；
字体大小：粗体；
}
.选定{
背景色：#ffb3b3；
}

芒果
不感兴趣
我的最爱！
菠萝
不感兴趣
我的最爱！
您所拥有的一切都有点不尽如人意

首先，您应该为您的输入提供一个类，以便不获取范围中的所有输入，但我们现在将忽略它，但将为它提供一个适当的类型，并将其锚定到我添加的一个新div，该div的ID不在原始的ID中

不要删除或尝试添加选中的属性，它会在更改时自动发生，这样做会阻止重置它。如果需要，请使用
.prop（）

您需要解决的一个问题是，您需要找到更改的收音机的兄弟姐妹并设置它们-它们将“取消设置/更改”-收音机是一个组中的单个收音机，但更改事件不会在以这种方式连接的“取消设置”情况下触发。你可以给他们所有人一个类和锚定，但我提出了一个解决方案，没有额外的标记

不要使用click事件，使用change（如果它通过脚本更改会怎么样？）


$（“客户偏好表”）
.on（'click'、'label'，函数（事件）{
event.preventDefault（）；
事件。stopImmediatePropagation（）；
var myradio=$（this.find（'input[type=radio]'）；
var isChecked=myradio.is（“：checked”）；
myradio.prop（“已选中”，已选中）；
myradio.trigger（'setlabelstate'）；
});
$（“客户偏好表”）
.on（'change setlabelstate'，'input[type=radio]'，function（）{
//我在这里使用标签是为了防止标题为的DIV同级出现
//添加该类-只需要标签同级。
var mySiblings=$（this）.parent（'label'）.siblings（'label'）；
var radios=$（this）.parent（'label'）
.添加（mySiblings）；
收音机。每个（功能（）{
var isChecked=$（this.find（'input[type=radio]'）。是（“：checked”）；