首页 » JavaScript DOM » JavaScript 复选框

JavaScript 复选框

摘要：在本教程中，您将学习如何使用 JavaScript 测试复选框是否选中，获取选定复选框的值以及选择/取消选择所有复选框。

创建 HTML 复选框

要创建复选框，可以使用<input> 元素，其type 为checkbox，如下所示

<input type="checkbox" id="accept"> Accept Code language: HTML, XML (xml)

最佳实践是始终将复选框与标签关联，以提高可用性和可访问性。通过这样做，单击标签也会选中或取消选中复选框。

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
</label>Code language: HTML, XML (xml)

或

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept </label>Code language: HTML, XML (xml)

请注意，标签的 for 属性的值必须与复选框的 id 相匹配。

以下方法有效，但属于不良实践，因此应避免使用

<input type="checkbox" id="accept" name="accept" value="yes"> AcceptCode language: HTML, XML (xml)

检查复选框是否选中

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

要获取复选框的状态，请执行以下步骤

  • 首先，使用 DOM 方法（例如getElementById() 或querySelector()）选择复选框。
  • 然后，访问复选框元素的checked 属性。如果其checked 属性为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="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    </label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    </script>

</body>

</html>Code language: HTML, XML (xml)

在此示例中

首先，创建 HTML 复选框元素

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes"> Accept 
</label>Code language: HTML, XML (xml)

其次，选择 id 为#accept 的复选框并检查checked 属性

const cb = document.querySelector('#accept');
console.log(cb.checked);Code language: JavaScript (javascript)

由于复选框未选中，您将在控制台中看到false

falseCode language: JavaScript (javascript)

考虑另一个示例

<!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="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    </label>

    <script>
        const checked = document.querySelector('#accept:checked') !== null;
        console.log(checked); // false
    </script>

</body>
</html>Code language: HTML, XML (xml)

在此示例中，选择器#accept:checked 选择 id 为#accept 且具有checked 属性的元素。例如，它匹配以下元素

<input type="checkbox" id="accept" checked> AcceptCode language: HTML, XML (xml)

但不匹配以下元素

<input type="checkbox" id="accept"> AcceptCode language: HTML, XML (xml)

因此，如果 id 为#accept 的复选框元素已选中，document.querySelector() 将返回它。在控制台窗口中，您将看到值false，因为复选框未选中

falseCode language: JavaScript (javascript)

获取复选框的值

以下页面显示了一个复选框和一个按钮。单击按钮时，您将在控制台窗口中看到复选框的值

<!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="accept">
        <input type="checkbox" id="accept" name="accept"> Accept
    </label>

    <button id="btn">Submit</button>
    <script>
        const cb = document.querySelector('#accept');
        const btn = document.querySelector('#btn');
        btn.onclick = () => {
           alert(cb.value);
        };
    </script>
</body>

</html>Code language: HTML, XML (xml)

获取复选框的value 属性时，无论复选框是否选中，您始终会获得'on' 字符串。

获取多个选定复选框的值

以下页面显示了三个复选框。如果您选择一个或多个复选框并单击按钮，它将显示所选复选框的值

<!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 colors:</p>
    <label for="c1"> <input type="checkbox" name="color" value="red" id="c1">Red</label>
    <label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
    <label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>
    <p>
        <button id="btn">Get Selected Colors</button>
    </p>

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

</body>

</html>Code language: HTML, XML (xml)

工作原理。

在 HTML 中，我们创建了三个名称相同（color）但值不同的复选框元素

<label for="c1"><input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2">Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>Code language: HTML, XML (xml)

在 JavaScript 中

首先，将单击事件处理程序添加到按钮

const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
   // ...            
});    Code language: JavaScript (javascript)

其次，在单击事件处理程序内使用document.querySelectorAll() 方法选择选定的复选框

let checkboxes = document.querySelectorAll('input[name="color"]:checked');Code language: JavaScript (javascript)

第三，将选定复选框的值推送到数组中

let values = [];
checkboxes.forEach((checkbox) => {
    values.push(checkbox.value);
});

alert(values);Code language: JavaScript (javascript)

演示

选中/取消选中所有复选框

以下页面有三个复选框和一个按钮。单击按钮时，如果复选框已选中，它们将被取消选中，反之亦然

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Check/uncheck checkboxes</title>
</head>
<body>
    <p>
        <button id="btn">Check / Uncheck All</button>
    </p>
    <label for="c1"><input type="checkbox" name="color" value="red" id="c1"> Red</label>
    <label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
    <label for="c3"> <input type="checkbox" name="color" value="blue" id="c3">Blue</label>

    <script>
        function check(checked = true) {
            const checkboxes = document.querySelectorAll('input[name="color"]');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = checked;
            });
        }

        function checkAll() {
            select();
            this.onclick = uncheckAll;
        }

        function uncheckAll() {
            select(false);
            this.onclick = checkAll;
        }

        const btn = document.querySelector('#btn');
        btn.onclick = checkAll;
    </script>

</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，定义check() 函数，该函数选中或取消选中名称为"color" 的所有复选框

function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="color"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}Code language: JavaScript (javascript)

单击按钮时，它会选中所有复选框。而且，如果您再次单击按钮，它应该取消选中所有复选框。要执行此切换，您需要在每次单击事件触发时重新分配单击事件处理程序。

其次，选择#btn 按钮并将checkAll() 函数分配给按钮的onclick 属性

const btn = document.querySelector('#btn');
btn.onclick = checkAll;Code language: JavaScript (javascript)

第三，定义checkAll() 函数，该函数选中所有复选框

function checkAll() {
  check();
  this.onclick = uncheckAll;
}
Code language: JavaScript (javascript)

最后，定义uncheckAll() 函数，该函数取消选中所有复选框

function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}Code language: JavaScript (javascript)

演示

动态创建复选框

以下示例演示了如何使用 JavaScript 动态创建复选框

<!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>
    <div id="root"></div>
    <script>
        const colors = ["Red","Green","Blue"];
        colors.forEach((color)=>{
            //  generate id
            const id = `color-${color}`;

            // create a label
            const label = document.createElement('label');
            label.setAttribute("for", id);
           
            // create a checkbox
            const checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.name = "color";
            checkbox.value = color;
            checkbox.id = id;

            // place the checkbox inside a label
            label.appendChild(checkbox);
            // create text node
            label.appendChild(document.createTextNode(color));
            // add the label to the root
            document.querySelector("#root").appendChild(label);
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

输出

<div class="output-cont"><div class="output">
<iframe height="250px" src="https://tutorial.javascript.ac.cn/sample/dom/checkbox/checkbox-dynamic.html"></iframe>
</div></div>Code language: HTML, XML (xml)

工作原理。

首先，定义一个包含三个字符串的数组。在实际应用中，您可能拥有来自 API 调用结果的数组

const colors = ["Red","Green","Blue"];Code language: JavaScript (javascript)

其次，遍历数组元素并执行以下操作

1) 为每个复选框生成一个唯一的 id

const id = `color-${color}`;Code language: JavaScript (javascript)

2) 创建一个标签并将 id 分配给 for 属性

const label = document.createElement('label');
label.setAttribute("for", id);Code language: JavaScript (javascript)

3) 创建一个复选框

const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;Code language: JavaScript (javascript)

4) 将复选框放置在标签内

label.appendChild(checkbox);Code language: CSS (css)

5) 创建一个文本节点并将其附加到标签

label.appendChild(document.createTextNode(color));Code language: CSS (css)

6) 将标签添加到根元素

 document.querySelector("#root").appendChild(label);Code language: CSS (css)

以下示例也像上面的示例一样动态生成复选框

<!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>
    <div id="root"></div>
    <script>
        const colors = ["Red","Green","Blue"];
        const html = colors.map(color => `<label for="color-${color}">
                <input type="checkbox" name="color" id="color-${color}" value="${color}"> ${color}
            </label>`
        ).join(' ');
       document.querySelector("#root").innerHTML = html;
    </script>
</body>
</html>Code language: HTML, XML (xml)

在此示例中

  • 首先，使用数组map() 方法和模板字面量 生成标签和复选框元素。
  • 其次，使用字符串join() 方法将 HTML 字符串连接成单个 HTML。
  • 第三，将 HTML 附加到#root 元素。

总结

  • 使用<input> 元素，其 type 为checkbox 来创建复选框元素。
  • 将复选框放置在标签元素内，以提高可用性和可访问性。
  • 使用checkbox.checked 属性或:check 选择器测试复选框是否选中。
  • 获取value 属性以获取复选框的值。
本教程对您有帮助吗？
JavaScript Form
之前
JavaScript 表单
下一个
JavaScript 单选按钮
JavaScript Radio Button