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>

 

posted @ 2019-10-29 10:06  西红柿里没有番茄  阅读(608)  评论(0)  编辑  收藏  举报