通过js事现全选，反选和全不选

最新推荐文章于 2024-04-02 19:39:43 发布

RashaunHan

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量132

点赞数

分类专栏： html5 javascript

本文链接：https://blog.csdn.net/u012580143/article/details/82389731

版权

html5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js">
        </script>
        <script>
            $(document).ready(function() {
                $("#btn1").click(function() {
                    alert("全选");
                    var mychk = document.getElementsByName("mychk");
                    if(mychk.length) {
                        for(var i = 0; i < mychk.length; i++) {
                            mychk[i].checked = true;
                        }
                    }
                });
                $("#btn2").click(function() {
                    alert("反选");
                    var mychk = document.getElementsByName("mychk");
                    if(mychk.length) {
                        for(var i = 0; i < mychk.length; i++) {
                            if(mychk[i].checked == true)
                            {
                                mychk[i].checked = false;
                            }else{
                                mychk[i].checked = true;
                            }
                        }
                    }
                });
                $("#btn3").click(function() {
                    alert("全不选");
                    var mychk = document.getElementsByName("mychk");
                    if(mychk.length) {
                        for(var i = 0; i < mychk.length; i++) {
                            mychk[i].checked = false;
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <table border="1px" width="100px">
            <tr>
                <input type="button" id="btn1" value="全选" />
                <input type="button" id="btn2" value="反选" />
                <input type="button" id="btn3" value="全不选" />
            </tr>
            <tr>
                <td><input id="mychk" type="checkbox" name="mychk" />1</td>
            </tr>
            <tr>
                <td><input id="mychk" type="checkbox" name="mychk" />2</td>
            </tr>
            <tr>
                <td><input id="mychk" type="checkbox" name="mychk" />3</td>
            </tr>
            <tr>
                <td><input id="mychk" type="checkbox" name="mychk" />4</td>
            </tr>
        </table>
    </body>
</html>