在 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>