JavaScript实现全选反选全不选

最新推荐文章于 2023-07-11 22:34:21 发布

zmx2029

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量312

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/baidu_25845567/article/details/51672839

版权

PHP 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选 全不选 反选</title>
    <link rel="stylesheet" type="text/css" href="select_all.css">
</head>
<body>
    <form method="post" action="">
        <input type="checkbox" value="1">iPhone6<br>
        <input type="checkbox" value="2">iPhone6 plus<br>
        <input type="checkbox" value="3">iPhone6s<br>
        <input type="checkbox" value="4">iPhone6s plus<br>
        <input type="checkbox" value="5">iPhone7<br>
        <input type="checkbox" value="6">iPhone7 plus<br>
        <!--button的type需设为button 否则按下后就提交表单 所有的复选框全部都清空选择-->
        <button class="btn" id="select-all" type="button">全选</button>
        <button class="btn" id="select-no" type="button">全不选</button>
        <button class="btn" id="select-inverse" type="button">反选</button>
    </form>
</body>
<script type="text/javascript" src="select_all.js"></script>
</html>

JavaScript

var selectAll = document.getElementById("select-all");
var selectNo = document.getElementById("select-no");
var selectInverse = document.getElementById("select-inverse");

var inputs = document.getElementsByTagName("input");

//全选
selectAll.onclick = function() {
    for(var i in inputs) {
        inputs[i].checked = true;
    }
}

//全不选
selectNo.onclick = function() {
    for(var i in inputs) {
        inputs[i].checked = false;
    }
}

//反选
selectInverse.onclick = function() {
    for(var i in inputs) {
        inputs[i].checked = !inputs[i].checked;
    }
}
CSS
button{
    outline: none;
}

zmx2029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现全选反选全不选

html lang="en">head> meta charset="UTF-8"> title>全选全不选反选title> link rel="stylesheet" type="text/css" href="select_all.css">head>body> form method="post" action=""> input t
复制链接

扫一扫