如何使用 JavaScript 在复选框和文本框的同一行移动按钮？(1)

📌 相关文章

📜 如何使用 JavaScript 在复选框和文本框的同一行移动按钮？(1)

📅 最后修改于: 2023-12-03 15:08:20.224000 🧑 作者: Mango

如何使用 JavaScript 在复选框和文本框的同一行移动按钮？

在某些应用程序中，经常需要在复选框和文本框之间添加移动按钮。可以使用JavaScript在复选框和文本框的同一行移动按钮。

HTML

首先，我们需要添加以下HTML结构：

<div class="control-group">
  <div class="controls">
    <input type="checkbox" id="checkbox1" name="checkbox1">
    <input type="text" id="text1" name="text1">
    <button type="button" onclick="moveRight()">→</button>
    <button type="button" onclick="moveLeft()">←</button>
  </div>
</div>

我们设置了一个包含三个元素的 control-group div。在 control-group div 中，我们添加了两个输入元素：

复选框：input 元素，type 属性设置为 "checkbox"。
文本框：input 元素，type 属性设置为 "text"。

在复选框和文本框之间，添加了两个按钮：

向右移动：button 元素，type 属性设置为 "button"，并设置 onclick 事件为 moveRight() 函数。
向左移动：button 元素，type 属性设置为 "button"，并设置 onclick 事件为 moveLeft() 函数。

CSS

把 input 和 button 元素放在同一行，需要一点 CSS 来设置它们的宽度。

input[type="checkbox"],
input[type="text"] {
  display: inline-block;
  width: 50%;
}

button {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: #ddd;
  margin: 0 5px;
}

在这里，我们设置了以下样式：

对于 checkbox 和 text 类型的 input 元素，设置显示为行内块元素，宽度为50%。
对于 button 元素，设置显示为行内块元素，设置固定的宽度和高度为20px，并设置了字体大小、边框等样式。

JavaScript

现在，我们使用JavaScript来实现按钮的行为。

首先，我们需要获取 input 元素和 button 元素。我们可以使用 document.getElementById 方法来获取。

const checkbox1 = document.getElementById("checkbox1");
const text1 = document.getElementById("text1");
const buttonRight = document.getElementsByTagName("button")[0];
const buttonLeft = document.getElementsByTagName("button")[1];

在这里，我们使用 getElementById 方法来获取 checkbox1 和 text1 元素，并使用 getElementsByTagName 方法来获取两个按钮。这将返回一个包含 button 元素的数组，我们可以使用索引来获取第一个（向右）和第二个（向左）按钮。

接下来，我们需要定义 moveRight 和 moveLeft 函数。这些函数将在向右或向左按钮被点击时执行。具体实现如下：

function moveRight() {
  if (checkbox1.checked) {
    text1.value = "";
  } else {
    text1.value = checkbox1.value;
  }
  checkbox1.checked = false;
  buttonRight.disabled = true;
  buttonLeft.disabled = false;
}

function moveLeft() {
  if (text1.value != "") {
    checkbox1.checked = true;
    checkbox1.value = text1.value;
  } else {
    checkbox1.checked = false;
  }
  text1.value = "";
  buttonLeft.disabled = true;
  buttonRight.disabled = false;
}

在 moveRight 函数中，我们检查 checkbox1 元素是否被选中。如果被选中，将 text1 的值设置为空字符串。如果未选中，将 text1 的值设置为 checkbox1 的值。然后，将 checkbox1 的状态设置为未选中，禁用向右按钮，并启用向左按钮。

在 moveLeft 函数中，我们检查 text1 的值是否为空。如果不为空，将 checkbox1 的状态设置为选中并将它的值设置为 text1 的值。如果为空，则将 checkbox1 的状态设置为未选中。然后，将 text1 的值设置为空字符串，禁用向左按钮并启用向右按钮。

结论

现在，我们已经完成了在复选框和文本框的同一行移动按钮的JavaScript代码。这个例子演示了如何使用JavaScript来控制元素的行为。我们可以使用相同的模式来实现更复杂的功能。完整代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Move Controls</title>
  <style>
    .control-group {
      margin-bottom: 10px;
    }

    input[type="checkbox"],
    input[type="text"] {
      display: inline-block;
      width: 50%;
    }

    button {
      display: inline-block;
      width: 20px;
      height: 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      background-color: #ddd;
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div class="control-group">
    <div class="controls">
      <input type="checkbox" id="checkbox1" name="checkbox1">
      <input type="text" id="text1" name="text1">
      <button type="button" onclick="moveRight()">→</button>
      <button type="button" onclick="moveLeft()">←</button>
    </div>
  </div>
  <script>
    const checkbox1 = document.getElementById("checkbox1");
    const text1 = document.getElementById("text1");
    const buttonRight = document.getElementsByTagName("button")[0];
    const buttonLeft = document.getElementsByTagName("button")[1];

    function moveRight() {
      if (checkbox1.checked) {
        text1.value = "";
      } else {
        text1.value = checkbox1.value;
      }
      checkbox1.checked = false;
      buttonRight.disabled = true;
      buttonLeft.disabled = false;
    }

    function moveLeft() {
      if (text1.value != "") {
        checkbox1.checked = true;
        checkbox1.value = text1.value;
      } else {
        checkbox1.checked = false;
      }
      text1.value = "";
      buttonLeft.disabled = true;
      buttonRight.disabled = false;
    }
  </script>
</body>
</html>