我有两个复选框，每个复选框分别处理垂直和水平状态。如果两个都关闭是可以的，但是如果一个打开另一个必须关闭，最重要的是两个都不能打开。
我不想在这里使用 jQuery。
如果我都未选中，然后先点击水平，然后点击垂直，它们将切换，因为水平未选中，垂直将变为选中。
但如果我从垂直开始以其他方式进行，我无法检查水平。
完整代码在 github 上和演示在 gh-pages 上运行.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle</title>
</head>
<style>
.constraint {
color: #007bff;
padding: 0rem .5rem;
}
span.horz:before {
content: "\2194";
}
span.vert:before {
content: "\2195";
}
</style>
<body>
<span class="constraint">Constraint: </span>
<span class="constraint vert">
<input type="checkbox" id="vertical" onchange="constraints()">
<span class="constraint horz"></span>
<input type="checkbox" id="horizontal" onchange="constraints()">
</body>
<script type="text/javascript">
function constraints() {
inputVert = document.getElementById("vertical");
inputHorz = document.getElementById("horizontal");
console.log("initially: vert:" + inputVert.checked);
console.log("initially: horz:" + inputHorz.checked);
if (inputVert.checked) {
console.log("vert clicked -> vert:" + inputVert.checked);
console.log("vert clicked -> horz:" + inputHorz.checked);
// inputHorz = document.getElementById("horizontal");
inputHorz.checked = false;
// inputVert.checked = true;
};
if (inputHorz.checked) {
console.log("horz clicked -> vert:" + inputVert.checked);
console.log("horz clicked -> horz:" + inputHorz.checked);
// inputVert = document.getElementById("vertical");
inputVert.checked = false;
// inputHorz.checked = true;
};
}
</script>
</html>非常感谢任何帮助，
谢谢
最佳答案
使用 JQuery 你可以这样做，希望这对你有帮助
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle</title>
</head>
<style>
.constraint {
color: #007bff;
padding: 0rem .5rem;
}
span.horz:before {
content: "\2194";
}
span.vert:before {
content: "\2195";
}
</style>
<body>
<span class="constraint">Constraint: </span>
<span class="constraint vert">
<input type="checkbox" id="vertical">
<span class="constraint horz"></span>
<input type="checkbox" id="horizontal">
</body>
<script type="text/javascript">
$('#vertical').change(function() {
if($(this).is(":checked")){
$('#horizontal').attr('checked', false);
}
});
$('#horizontal').change(function() {
if($(this).is(":checked")){
$('#vertical').attr('checked', false);
}
});
</script>
</html>关于javascript - 切换两个复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46221461/