在 JavaScript 中获取复选框的值

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中获取复选框的值

作者：迹忆客最近更新：2024/03/20 浏览次数：

本文将帮助你使用 JavaScript 检查是否选中了复选框，获取选中复选框的值，以及选择/取消选择所有复选框。

在 JavaScript 中检查是否选中了复选框

复选框有两种状态：选中和未选中。

你可以按照这些过程来确定复选框的条件。

首先，使用 getElementById() 或 querySelector() 之类的 DOM 技术 来选择复选框。
然后，进入复选框元素的选中属性。如果其选中的属性是实际的，则选中该复选框；否则，它不是。

以下代码使用 querySelector() 方法显示了这一点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>
<body>
    <label for="submit">
        <input type="checkbox" id="submit" name="submit" value="yes"> Submit
    </label>

    <script>
        const js = document.querySelector('#submit');
        console.log(js.checked); 
    </script>

</body>
</html>

在这个例子中，

首先，你可以创建一个 Html 复选框元素。

<label for="submit">
   <input type="checkbox" id="submit" name="submit" value="yes"> Submit 
</label>

其次，检查带有 id #submit 的复选框的选中属性。

const js = document.querySelector('#submit');
console.log(js.checked);

由于未选中该复选框，因此控制台中显示的结果将为 false。

false

如果选中该复选框，它将在控制台中显示 true。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>
<body>
    <label for="submit">
        <input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
    </label>

    <script>
        const js = document.querySelector('#submit');
        console.log(js.checked); 
    </script>

</body>
</html>

你将在控制台中看到输出为 true。

true

获取`复选框`值

复选框 和按钮 可以在下一页找到。单击按钮时，复选框的值将显示在控制台窗口上：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>

<body>
    <label for="payment">
        <input type="checkbox" id="payment" name="payment"> Payment
    </label>

    <button id="bt">Submit</button>
    <script>
        const js = document.querySelector('#payment');
        const bt = document.querySelector('#bt');
        bt.onclick = () => {
           alert(js.value);
        };
    </script>
</body>
</html>

无论复选框是否被选中，当你获得复选框的 value 属性时，你总是会获得 on 字符串。

在 JavaScript 中使用 `querySelectorAll()` 获取多个选定复选框的值

在下一页可以找到三个复选框。当你选择一个或多个复选框并按下按钮时，将显示所选复选框的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxes</title>
</head>

<body>
    <p>Select your favorite subject:</p>
    <label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
    <label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
    <label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
    <p>
        <button id="bt">Get Selected subject</button>
    </p>

    <script>
        const bt = document.querySelector('#bt');
        bt.addEventListener('click', (event) => {
            let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
            let output = [];
            checkboxes.forEach((checkbox) => {
                output.push(checkbox.value);
            });
            alert(output);
        });    
    </script>
</body>
</html>

下面是它的工作原理。

我们在 HTML 中创建了三个具有相同名称（颜色）但值不同的复选框元素。

<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>

在 JavaScript 中：

首先，将以下内容添加到按钮的单击事件处理程序中：
其次，使用文档选择指定的复选框。在 click 事件处理程序中，使用 querySelectorAll() 方法：
第三，使用选中复选框的值创建一个数组：

const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
  let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
  let output = [];
  checkboxes.forEach((checkbox) => {
    output.push(checkbox.value);
  });
  alert(output);
});

使用 JavaScript 中的 `getElementById()` 方法获取多个选定复选框的值

现在你将学习如何使用 getElementById() 方法获取所有用户的复选框值。看看下面的例子。

<html>
<body>

<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td> 
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>  

<script>
function checkAll() {
        var inputs = document.querySelectorAll('.ss'); 
        for (var k = 0; k < inputs.length; k++) {
            inputs[k].checked = true; 
        } 
}
function getCheckboxValue() {

  var sub1 = document.getElementById("s1");
  var sub2 = document.getElementById("s2");
  var sub3 = document.getElementById("s3");
  var sub4 = document.getElementById("s4");
  var sub5 = document.getElementById("s5");
  var sub6 = document.getElementById("s6");
   
  var result=" "; 
  if (sub1.checked == true){
    var ss1 = document.getElementById("s1").value;
    result = ss1 + ","; 
  } 
  else if (sub2.checked == true){
    var ss2 = document.getElementById("s2").value;
    result = result + ss2 + ","; 
  }
  else if (sub3.checked == true){
  document.write(result);
    var ss3 = document.getElementById("s3").value;
    result = result + ss3 + ","; 
  }
  else if (sub4.checked == true){
    var ss4 = document.getElementById("s4").value;
    result = result + ss4 + ","; 
  }
  else if (sub5.checked == true){
    var ss5 = document.getElementById("s5").value;
    result = result + ss5 + ","; 
  }
  else if (sub6.checked == true){
    var ss6 = document.getElementById("s6").value;
    result = result + ss6; 
  } else {
  return document.getElementById("result").innerHTML = "please,select any one";
  }
  return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>

</body>
</html>

输出：

通过运行这段代码，我们会得到类似下面的响应，你可以在其中选择你熟悉的主题。

演示

上一篇：选中 JavaScript 中的所有复选框

下一篇：在 JavaScript 中选中复选框时显示文本

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享