Jquery 充当单选按钮的自定义div

我在一个网站上工作，在实现一个行为类似单选按钮的div（有产品名称、价格和图像）时遇到了问题（类似这样的东西）

---

任何类型的解决方案都值得赞赏，我目前正在使用bootstrap4&JQuery/Javascript

一个简单的解决方案是使用一个类来指示选择了哪个按钮，然后捕获每个按钮并单击：

（1） 关闭所有按钮上的类

（2） 为单击的按钮打开类

简单、优雅、实用

$（'.myradio'）。单击（函数（）{
$（'.myradio'）.removeClass（'myactive'）；
$（this.addClass（'myactive'）；
});
.myradio{display:inline block；}
.myactive{背景：道奇蓝；颜色：白色；}
/*仅外观*/
.myradio{填充：3px 7px；左边距：10px；边框：1px实心dodgerblue；边框半径：5px；}

一个
两个
三个
想法是让用户单击单选按钮的标签。这允许它周围的div执行其他操作，并显示为您实际单击的内容。您还必须使用标签中的“for”属性来引用输入中的id

如果使用“名称”属性，Radio将取消选择其他项并选择已单击的项。请注意标记上的所有收音机都包含名称“myradio”。虽然他们有不同的身份证。这是为了让您可以收回这些数据并根据自己的喜好使用它

请注意，CSS完成了繁重的工作。我们让它查找已选中的输入（input[name=“myradio”]：checked），并使用“+”抓住它后面的下一个元素（.clickable或.clickable.checked框）

我还向示例中添加了一个小jQuery，以在控制台中显示所选框的id，这样您就可以了解我对数据返回的含义

这里还有一个关于我使用的CSS选择器的更多信息的链接

CSS元素+元素选择器




代码示例
.div内联列表{
保证金：24px自动；
宽度：80%；
文本对齐：居中；
}
.div内联列表>.product容器{
显示：内联块；
利润率：16px；
}
.产品容器{
位置：相对位置；
宽度：100px；
高度：100px；
填充：0px；
}
.产品{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.可点击{
位置：绝对位置；
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
边框：1px纯绿色；
边界半径：4px；
过渡：一切轻松。5s；
z指数：10；
}
.复选框{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：22px；
高度：22px；
背景色：#0055ff；
颜色：#fff；
文本对齐：居中；
边框右上角半径：4px；
显示：无；
}
输入[name=“myradio”]：选中+。可单击{
边框颜色：#0055ff；
盒影：0px 0px 6px 2px#0055ff；
}
输入[name=“myradio”]：选中+。可单击。复选框{
显示：块；
}
✔
产品1

✔
产品2

✔
产品3

$（文档）.ready（函数（）{
//在单选按钮“myradio”上，将状态更改日志发送到控制台以查看
$（'input[name=“myradio”]”）。更改（函数（）{
console.log（“#”+$（'input[name=“myradio”]：checked'）.attr（'id'）；
});
});
我不知道为什么会被否决……我也不知道……难道你不想保存我的代表并把它放回0:p给你调高一点：）这就是主任