JavaScript 如何勾选/取消勾选复选框

在本篇文章中，我们将学习如何使用JavaScript勾选/取消勾选复选框。有两种方式可以实现勾选/取消勾选复选框：

使用重置按钮
使用独立按钮

方法1：使用重置按钮

创建一个JavaScript函数。
使用window.addEventListener方法来添加事件监听器。
使用window.onload()函数在页面刷新或加载时执行任务。

示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check/Uncheck the 
        checkbox using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h2>Check/Uncheck the checkbox using JavaScript</h2>
     
    <form>
        <div>
            <input type="button"
                onclick="checkAll()" value="CHECK ALL">
            <input type="reset" value="UNCHECK ALL">
        </div>
 
        <div>
            <label>
                <input type="checkbox" class="check3"> First
            </label>
        </div>
         
        <div>
            <label>
                <input type="checkbox" class="check3"> Second
            </label>
        </div>
         
        <div>
            <label>
                <input type="checkbox" class="check3"> Third
            </label>
        </div>
    </form>
 
    <script>
 
        // Create function of check/uncheck box
        function checkAll() {
 
            let  inputs = document.querySelectorAll('.check3');
 
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
         
        window.onload = function () {
            window.addEventListener('load', checkAll, false);
        }
    </script>
</body>
 
</html>

输出：

JavaScript 如何勾选/取消勾选复选框

方法2

创建两个JavaScript函数
使用window.addEventListener和window.onload函数

示例： 在这个示例中，我们将使用window.addEventListener和window.onload函数。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check/Uncheck the
        checkbox using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h2>Check/Uncheck the checkbox using JavaScript</h2>
 
    <form>
        <div>
            <input type="button"
                onclick="checkAll()"
                value="Check All">
 
            <input type="button"
                onclick="uncheckAll()"
                value="Uncheck All">
        </div>
 
        <input type="checkbox" class="check2">
        <label>First</label>
 
        <input type="checkbox" class="check2">
        <label>Second</label>
 
        <input type="checkbox" class="check2">
        <label>Third</label>
    </form>
 
    <script>
 
        // Create checkall function
        function checkAll() {
            let inputs = document.querySelectorAll('.check2');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
 
        // Create uncheckall function
        function uncheckAll() {
            let inputs = document.querySelectorAll('.check2');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].checked = false;
            }
        }
 
        window.onload = function () {
            window.addEventListener('load', checkAll, false);
        }
    </script>
</body>
 
</html>

输出：

JavaScript 如何勾选/取消勾选复选框