JS实现“全选”和"全不选"功能

效果图:

<!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>

猜你喜欢

转载自www.cnblogs.com/lyd447113735/p/11757152.html
今日推荐