JS.全选，反选，取消选择

BowenXu11

于 2020-04-13 14:43:27 发布

阅读量167

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/BowenXu11/article/details/105488525

版权

javascript 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            //1.获取全选按钮,注册单击事件
            this.document.getElementById('btnAll').onclick = function () {
                //1.1.获取所有checkbox 并checked
                var allCheckbox = document.getElementsByTagName('input');
                for (var i = 0; i < allCheckbox.length; i++) {
                    if (allCheckbox[i].type=='checkbox') {
                        allCheckbox[i].checked = 'checked';
                    }                  
                }
            };
            //2.获取反选按钮
            this.document.getElementById('btnUnall').onclick = function () {
                //2.获取所有input标签。type==checkbox 进行选择，checked='checked'设置为checked=''
                var allCheckbox = document.getElementsByTagName('input');
                for (var i = 0; i < allCheckbox.length; i++) {
                    if (allCheckbox[i].type == 'checkbox') {
                        if (allCheckbox[i].checked) {
                            allCheckbox[i].checked = '';
                        }
                        else {
                            allCheckbox[i].checked = 'checked';
                        }
                    }
                }
            };

            //3.取消选择
            this.document.getElementById('btnCancel').onclick = function () {
                var allCheckbox = document.getElementsByTagName('input');
                for (var i = 0; i < allCheckbox.length; i++) {
                    if (allCheckbox[i].type=='checkbox') {
                        allCheckbox[i].checked = '';
                    }                  
                }
            };

            


        };
    </script>
</head>
<body>
    <input type="checkbox" name="name" value="" checked="checked"/>惊雷<br />
    <input type="checkbox" name="name" value="" />凉凉<br />
    <input type="checkbox" name="name" value="" />像鱼<br />
    <input type="checkbox" name="name" value="" />喜欢你<br />
    <input type="checkbox" name="name" value="" />汝南<br />
    <input type="checkbox" name="name" value="" />散花<br />
    <input type="checkbox" name="name" value="" />趁早<br />
    <input type="checkbox" name="name" value="" />勇敢<br />
    <input type="checkbox" name="name" value="" />麻雀<br />
    <input type="checkbox" name="name" value="" />学猫叫<br />
     
                                                     <div>
                                                         <input type="button" name="name" value="全选" id="btnAll"/>
                                                         <input type="button" name="name" value="反选" id="btnUnall" />
                                                         <input type="button" name="name" value="取消选择"id="btnCancel" />
                                                     </div>>
</body>
</html>

BowenXu11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS.全选，反选，取消选择

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"...
复制链接

扫一扫

专栏目录