Javascript 切换两个复选框

我有两个复选框，每个复选框分别处理垂直和水平状态。如果两个都关闭，这是可以的，但是如果一个打开，另一个必须关闭，最重要的是两个都不能打开

我不想在这里提问

如果我两个都未选中，我点击水平方向，然后点击垂直方向，它们将切换，因为水平方向未选中，垂直方向将被选中

但是如果我从垂直方向开始用另一种方法，我就不能检查水平方向

完整代码已打开，演示正在运行

切换
.约束{
颜色：#007bff；
填充：0雷姆。5雷姆；
}
霍斯：以前{
内容：“\2194”；
}
span.vert:之前{
内容：“\2195”；
}
约束条件：
函数约束（）{
inputVert=document.getElementById（“垂直”）；
inputHorz=document.getElementById（“水平”）；
日志（“最初：垂直：+inputVert.checked”）；
log（“最初：horz:+inputHorz.checked”）；
如果（输入转换已选中）{
日志（“垂直单击->垂直：+inputVert.checked”）；
log（“垂直单击->水平：+inputHorz.checked”）；
//inputHorz=document.getElementById（“水平”）；
inputHorz.checked=false；
//inputVert.checked=true；
};
如果（输入权限已选中）{
日志（“水平单击->垂直：+inputVert.checked”）；
log（“horz单击->horz:+inputHorz.checked”）；
//inputVert=document.getElementById（“垂直”）；
inputVert.checked=false；
//inputHorz.checked=true；
};
}

这是使用输入收音机的经典场景。这将强制用户选择最多一个选项。

---

使用JQuery，您可以这样做，希望这对您有所帮助

切换
.约束{
颜色：#007bff；
填充：0雷姆。5雷姆；
}
霍斯：以前{
内容：“\2194”；
}
span.vert:之前{
内容：“\2195”；
}
约束条件：
$（'#垂直'）。更改（函数（）{
如果（$（this）.is（“：checked”））{
$（“#水平”）.attr（'checked'，false）；
}    
});
$（'#水平'）。更改（函数（）{
如果（$（this）.is（“：checked”））{
$（'#vertical'）.attr（'checked'，false）；
}    
});

基于，您可以将其进一步简化为以下内容：

$('#vertical').on("change", function() {
   $('#horizontal').attr('checked', !$(this).is(":checked"));
});
    
$('#horizontal').on("change", function() {
   $('#vertical').attr('checked', !$(this).is(":checked"));
});

---

我希望将复选框更改为一个漂亮的切换，如这里所示，但如果我必须使用单选按钮，我想我无法做到这一点。谢谢，请在链接周围添加一些上下文。答案不能仅仅依赖于外部内容，这些内容可能会离线，使帖子对其他用户毫无用处……JS是否应该在立即调用的函数中？或者已经使用IIF会导致您编写的JS无法运行吗？我已经在头部添加了jQuery cdn链接。在主项目中遇到问题，哪个在github上herehttps://github.com/shanegibney/Scale-Canvas-Upload-Image-Dimensions 这里还有一个gh页面演示，现在我看到您在头部包含jquery，在底部包含jquery slim，只让其中一个，然后再次尝试：如果您删除底部包含jquery-3.2.1.slim.min.js文件的行，所有工作正常