如果选中复选框,则 javascript 获取布尔值 - Javascript (1)

📌 相关文章

📜 如果选中复选框,则 javascript 获取布尔值 - Javascript (1)

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

如果选中复选框，则 JavaScript 获取布尔值 - Javascript

在编写 Web 应用程序时，经常需要获取 HTML 元素的值，例如复选框的值。在 JavaScript 中，我们可以使用 checked 属性获取复选框的值。

HTML 代码

先来看一个示例 HTML 代码，其中包含一个带有 ID 的复选框和一个按钮。

<input type="checkbox" id="myCheckbox" />选中复选框获取布尔值
<br />
<button onclick="handleClick()">获取复选框值</button>

JavaScript 代码

然后，我们必须编写 JavaScript 代码以获取复选框的值。我们将创建一个名称为 handleClick 的函数，该函数将从复选框中获取值并显示弹出窗口。

function handleClick() {
  const isChecked = document.getElementById("myCheckbox").checked;
  alert("复选框的值为：" + isChecked);
}

请注意，我们使用 document.getElementById() 方法获取元素的引用，并使用 checked 属性获取该元素的值。如果该元素被选中，则 checked 属性的值为 true，否则为 false。

完整代码

最后，以下是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>获取复选框值</title>
  </head>
  <body>
    <input type="checkbox" id="myCheckbox" />
    <label for="myCheckbox">选中复选框获取布尔值</label>
    <br />
    <button onclick="handleClick()">获取复选框值</button>
    <script>
      function handleClick() {
        const isChecked = document.getElementById("myCheckbox").checked;
        alert("复选框的值为：" + isChecked);
      }
    </script>
  </body>
</html>

当用户单击“获取复选框值”按钮时，将调用 handleClick 函数，该函数将从复选框中获取值并弹出一个消息框，显示该值。