切换两个复选框答案

【问题标题】：Toggle two checkboxes切换两个复选框
【发布时间】：2020-07-09 19:07:19
【问题描述】：

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

我不想在这里使用 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>

非常感谢任何帮助，

谢谢

【问题讨论】：

标签： javascript checkbox toggle

【解决方案1】：

使用 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>

【讨论】：

JS 应该在一个立即调用的函数中吗？还是已经使用 IIF 会导致您编写的 JS 无法运行？
我已经在头部添加了 jQuery cdn 链接。
无法将其引入主项目，该项目位于 github 上 https://github.com/shanegibney/Scale-Canvas-Upload-Image-Dimensions 和 gh-pages 演示 shanegibney.github.io/Scale-Canvas-Upload-Image-Dimensions
现在我看到你在头部包含 jquery，在底部包含 jquery slim，只让其中一个再试一次
已测试：如果去掉底部包含 jquery-3.2.1.slim.min.js 文件的行，一切正常

【解决方案2】：

这是使用输入收音机的经典场景。这迫使用户最多选择一个选项。 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

【讨论】：

我希望将复选框更改为像这里 bootstraptoggle.com 这样的漂亮切换按钮，但如果我必须使用单选按钮，我认为我无法做到这一点。谢谢
请在您的链接周围加上一些上下文。答案不能只依赖于外部内容，可能会离线，使帖子对其他用户毫无用处......

【解决方案3】：

基于@Leonardo's answer，可以进一步简化为：

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

【讨论】：