Javascript 仅显示复选框中的值，如果选中其他复选框，则取消选中它们

假设我有3个复选框：

我想在div中显示checked复选框的值，但一次只能激活一个复选框

我试图将这两个例子结合在一起，但这有点杂乱无章：

当时只检查了一个

$（'input.example'）。在（'change'，function（）上{
$（'input.example'）.not（this）.prop（'checked'，false）；
});

用这个

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var-favorite=[]；
$.each（$（$输入[name='sport']：选中），函数（）{
favorite.push（$（this.val（））；
});
提醒（“我最喜欢的运动是：“+favorite.join”（“，”））；
});
});

---

谢谢

一个简单的方法是，在检测到单击时，首先取消选中所有复选框，然后重新选中当前选中的复选框

$（'.prx'）。单击（函数（）{
$（'.prx'）.prop（'checked'，false）；
$（this.prop（'checked'，true）；
设prx=$（this.val（）；
$（'#msg'）.text（prx）；
});
#msg{页边顶部：20px；填充：10px；背景：小麦；}

25.99

15.99

10.99

 > p>你应该考虑把这个输入设为单选按钮。< /P>
你基本上打破了UX的复选框，不允许多重选择。默认情况下，单选按钮输入会执行此行为（一次选择一个选项），对于易访问性用户来说，将具有预期的选项卡操作，并且不需要所有这些额外的JS


$(document).on("click", ".prx", function (){
var self = $(this);
   $('.prx').not(self).prop('checked', false);
   self.prop('checked', true);
   alert(self.val());
});