切换两个复选框
[英]Toggle two checkboxes
问题描述
I have two checkboxes, each handling a vertical and horizontal state respectively.
我有两个复选框，每个复选框分别处理垂直和水平状态。 It is ok if both are off, but if one is on the other must be off and most importantly both can not be on.如果两个都关闭也可以，但是如果一个打开另一个必须关闭，最重要的是两个都不能打开。
I do not want to jQuery here.我不想在这里使用 jQuery。
If I both are unchecked and I hit the horizontal one and then the vertical, they will toggle, as the horizontal goes unchecked and the vertical will become checked.如果我都未选中并且我先点击了水平方向然后点击了垂直方向，它们将切换，因为水平方向未选中而垂直方向将变为选中状态。
But if I do it the other way starting with the vertical, I can't check the horizontal.但是，如果我从垂直方向开始以另一种方式进行操作，则无法检查水平方向。
Full code is on github and demo running on gh-pages .完整代码在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>
Any help greatly appreciated,非常感谢任何帮助，
Thanks谢谢
3 个解决方案
解决方案1
2 已采纳 2017-09-14 14:33:35
With JQuery you can do it like this, hope this help you使用 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>
解决方案2
1 2017-09-14 14:25:15
This is a classic scenario for using an input radio.这是使用输入收音机的经典场景。 This forces the user to choose up to one choice.这迫使用户最多选择一个选项。 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio
解决方案3
0 2020-07-09 11:07:19
Based on @Leonardo's answer , you can further simplify it to the following:根据@Leonardo 的回答，您可以将其进一步简化为以下内容：
$('#vertical').on("change", function() {
$('#horizontal').attr('checked', !$(this).is(":checked"));
});
$('#horizontal').on("change", function() {
$('#vertical').attr('checked', !$(this).is(":checked"));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.