数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 JavaScript 检查/取消选中复选框的程序
在本文中，我们将学习如何在 JavaScript 中检查或取消选中复选框，以及如何使用它来允许用户在网页上进行多项选择。
复选框是表单和用户界面中最常用的 HTML 元素之一，允许用户选择多个选项。在 JavaScript 中，我们可以根据某些条件或用户交互动态地检查或取消选中复选框。
让我们来看一些示例，以更好地理解这个概念。
示例 1
在这个示例中，我们将：
我们将创建 3 个不同的复选框，一个 checkAll() 函数和一个 uncheckAll() 函数。
在 checkAll() 函数中，我们将选择所有复选框，并使用 forEach() 方法遍历选定的复选框，并将 checked 属性设置为 true，从而选中所有复选框。
类似地，在 uncheckAll() 函数中，我们将遵循相同的步骤，但这次我们将 checked 属性设置为 false，从而取消选中所有复选框。
文件名 - index.html
<html>
<head>
<title>Program To check / uncheck Checkboxes Using Javascript</title>
</head>
<body>
<h3>Program to check/uncheck checkboxes using JavaScript</h3>
<label>
<input type="checkbox" id="first ch"/>
Checkbox 1
</label>
<br/>
<label>
<input type="checkbox" id="second ch" />
Checkbox 2
</label>
<br/>
<label>
<input type="checkbox" id="third ch" />
Checkbox 3
</label>
<br/>
<button onclick="checkAll()">Check All</button>
<button onclick="uncheckAll()">Uncheck All</button>
<script>
function checkAll(){
const checkboxes=document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox)=>{
checkbox.checked=true;
})
}
function uncheckAll(){
const checkboxes=document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox)=>{
checkbox.checked=false
})
}
</script>
</body>
</html>
输出
结果将类似于下面的图像。
示例 2 - 使用三元运算符
在这个示例中，让我们进行以下更改：
更改事件侦听器以检测其状态的变化，以及两个分别标记为“选中所选”和“取消选中所选”的按钮。
单击时，这些按钮将遍历复选框并选中/取消选中具有 selected 类别的复选框。
文件名 - index.html
<html>
<head>
<title>Program To check / uncheck checkboxes using Javascript</title>
<script src="script.js"></script>
<style>
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<h3>Check/Uncheck Checkboxes</h3>
<ul>
<li>
<label>
<input type="checkbox" id="first ch" />
Checkbox 1
</label>
</li>
<li>
<label>
<input type="checkbox" id="second ch" />
Checkbox 2
</label>
</li>
<li>
<label>
<input type="checkbox" id="third ch" />
Checkbox 3
</label>
</li>
</ul>
<button onclick="checkSelected()">Check Selected</button>
<button onclick="uncheckSelected()">Uncheck Selected</button>
<script>
let checkboxes = document.querySelectorAll("[type='checkbox']");
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
ch.addEventListener('change', (evt) => {
if (evt?.target?.checked) {
evt.target.parentElement.parentElement.classList.add('selected');
} else {
evt.target.parentElement.parentElement.classList.remove('selected');
}
});
}
function checkSelected() {
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
if (ch.parentElement.parentElement.classList.contains('selected')) {
ch.checked = true;
}
}
}
function uncheckSelected() {
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
if (ch.parentElement.parentElement.classList.contains('selected')) {
ch.checked = false;
}
}
}
</script>
</body>
</html>
输出
结果将类似于下面的图像。
结论
在本文中，我们学习了如何创建一个使用 JavaScript 检查或取消选中复选框的程序。我们使用了复选框的 checked 属性来切换其状态。我们学习了如何在 JavaScript 中编写检查或取消选中复选框的代码，并查看了一些解释相同的示例。
更新于：2023年8月16日
385 次查看
广告