JavaScript全选不选与反选小实例

最新推荐文章于 2023-10-23 14:09:15 发布

lhq5189935

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量279

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lhq5189935/article/details/44814875

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script>
            window.onload = function () {
                var oBtn1 = document.getElementById('btn1');
                var oBtn2 = document.getElementById('btn2');
                var oBtn3 = document.getElementById('btn3');
                var odiv = document.getElementById('div1');
                var aCh = odiv.getElementsByTagName('input');
                oBtn1.onclick = function () {
                    for (var i = 0; i < aCh.length; i++) {
                        aCh[i].checked = true;
                    }
                };
                oBtn2.onclick = function () {
                    for (var i = 0; i < aCh.length; i++) {
                        aCh[i].checked = false;
                    }
                };
                
                
                  oBtn3.onclick = function () {
                    for (var i = 0; i < aCh.length; i++) {
                     if(aCh[i].checked == true)
                     {
                         aCh[i].checked=false;
                     }
                     else
                     {
                         aCh[i].checked = true;
                     }
                    }
                };


            };
        </script>
    </head>

    <body>
        <input id="btn1" type="button" value="全选" /><br />
        <input id="btn2" type="button" value="不选" /><br />
        <input id="btn3" type="button" value="反选" /><br />
        <div id="div1">
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
        </div>
    </body>
</html>

一个很简单的全选、不选与反选小实例。

lhq5189935

关注

0
点赞
踩
0

收藏

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

无标题文档 window.onload = function () { var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var o
复制链接

扫一扫