取消选中所有复选框打字稿(1)

📌 相关文章

📜 取消选中所有复选框打字稿(1)

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

取消选中所有复选框

当我们需要在页面上进行大量复选框的选择操作时, 可能会需要提供一个快速的按钮来取消选中所有复选框。以下是针对此功能的示例代码。

HTML代码

下面是一个范例HTML页面, 包含一个按钮和两个复选框:

<!DOCTYPE html>
<html>
<head>
	<title>取消选中所有复选框</title>
</head>
<body>

	<h1>取消选中所有复选框</h1>

	<input type="checkbox" name="check1"> Checkbox 1<br>
	<input type="checkbox" name="check2"> Checkbox 2<br>

	<button id="clear">取消选中所有复选框</button>

	<script src="script.js"></script>

</body>
</html>

JavaScript代码

下面是JavaScript代码, 包括为按钮添加事件侦听器的功能函数和通过所有复选框并将其取消选中的功能代码:

// 获取按钮元素
const button = document.getElementById('clear');

// 添加点击事件侦听器
button.addEventListener('click', () => {
    // 获取所有复选框元素
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    // 遍历所有复选框, 将其选中状态设置为 '未选中'
    checkboxes.forEach((checkbox) => {
        checkbox.checked = false;
    });
});

这些代码可保存在名为 script.js 的文件中, 并添加到HTML文件的底部.

Markdown格式返回代码片段

以下是针对此示例的Markdown格式代码片段:

# 取消选中所有复选框

当我们需要在页面上进行大量复选框的选择操作时, 可能会需要提供一个快速的按钮来取消选中所有复选框。以下是针对此功能的示例代码。

## HTML代码

下面是一个范例HTML页面, 包含一个按钮和两个复选框:

```html
<!DOCTYPE html>
<html>
<head>
	<title>取消选中所有复选框</title>
</head>
<body>

	<h1>取消选中所有复选框</h1>

	<input type="checkbox" name="check1"> Checkbox 1<br>
	<input type="checkbox" name="check2"> Checkbox 2<br>

	<button id="clear">取消选中所有复选框</button>

	<script src="script.js"></script>

</body>
</html>

JavaScript代码

下面是JavaScript代码, 包括为按钮添加事件侦听器的功能函数和通过所有复选框并将其取消选中的功能代码:

// 获取按钮元素
const button = document.getElementById('clear');

// 添加点击事件侦听器
button.addEventListener('click', () => {
    // 获取所有复选框元素
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    // 遍历所有复选框, 将其选中状态设置为 '未选中'
    checkboxes.forEach((checkbox) => {
        checkbox.checked = false;
    });
});

这些代码可保存在名为 script.js 的文件中, 并添加到HTML文件的底部.