javascript 切换两个复选框

flvtvl50 于 2022-12-17 发布在 Java

关注(0)|答案(3)|浏览(136)

我有两个复选框，每个分别处理垂直和水平状态。如果两个都关闭是可以的，但是如果一个打开了，另一个必须关闭，最重要的是两个都不能打开。
我不想在这里使用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

来源：https://stackoverflow.com/questions/46221461/toggle-two-checkboxes

3条答案

按热度按时间

drnojrws1#

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

赞(0）回复(0）举报 2022-12-17

5n0oy7gb2#

使用单选按钮

这是使用输入单选按钮的经典场景。它一次只允许选择一个：

<!DOCTYPE html>
<html>
<body>

<form action="">
  <input type="radio" name="fav_language" value="HTML"> HTML <br>
  <input type="radio" name="fav_language" value="CSS"> CSS<br>
  <input type="radio" name="fav_language" value="JavaScript"> JavaScript
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

</body>
</html>

如您所见，它允许最初不选中任何选项，但一旦选中一个选项，就无法返回到未选中状态。您可以添加另一个按钮或控件，将其重置为初始未选中状态，或者在选中某个选项时显示另一个标记为none的单选按钮。

赞(0）回复(0）举报 2022-12-17

4bbkushb3#

根据@列奥纳多的回答，可以进一步简化为：

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

赞(0）回复(0）举报 2022-12-17

我来回答

javascript 切换两个复选框

3条答案

使用单选按钮

相关问题

热门标签

最新问答