Rumah > Artikel > hujung hadapan web > JavaScript如何实现“全选”和"全不选"功能？（代码示例）
JavaScript如何实现“全选”和"全不选"功能？（代码示例）
- 青灯夜游asal
- 2020-06-16 10:27:323664semak imbas
本篇文章给大家介绍一下使用JavaScript实现“全选”和"全不选"功能的方法，文中通过示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function clickon() {
// 获取到body中所有checkbox
var checkbox = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = true;
}
}
function unclick() {
var checkbox = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false;
}
}
</script>
<body>
<form>
<input type="checkbox">吃
<input type="checkbox">喝
<input type="checkbox">拉
<input type="checkbox">撒
<input type="button" value="全选" onclick="clickon()">
<input type="button" value="全不选" onclick="unclick()">
</form>
</body>
</html>效果
更多jQuery、Javascript特效，推荐访问：js特效大全！
Atas ialah kandungan terperinci JavaScript如何实现“全选”和"全不选"功能？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS实现好看的鼠标跟随彩色气泡效果（附代码）Artikel seterusnya：JS如何实现盒子拖拽效果？（附代码）