首页 > 下载 > 下载详文:Javascript处理checkbox全选方法

Javascript处理checkbox全选方法

发布时间:2019年12月03日 21时07分03秒   属性:程序Web开发 > Javascript/Html    访问次数:65316
字体: 初始 添加收藏 分享给好友

Javascript处理checkbox全选方法

在div、ul或表格Table元素中,有若干个勾选框checkbox,需要一次性全选或取消全选,通过客户端脚本处理,选择元素查找到下面的子元素Checkbox的个数,循环处理checked属性即可。

在本文示例中,先建立一个Table列表,第一列为“角色名”,第二列为“用户组成员”,第三组时勾选“选取角色”项。在申请角色申请时可以提供多选,需要提供全选和全部取消选择,也就是清空处理。Table加入简单的CSS样式:table.characterRolsetable.characterRolse thtable.characterRolse td.tableFooter 为表格页脚, .alignLeft.alignRight.alignCenter 为三个对齐方式。

CSS 代码  复制

 <style type="text/css">
        /* Copyright(C) 遗昕|Weisim3.com 12.03.2019
          Javascript处理checkbox全选方法 */

         .alignLeft {
            text-align: left
        }

       .alignRight {
            text-align: right
        }

        .alignCenter {
            text-align: center
        }

        .tableFooter {
            border-bottom: 1px solid #333;
            background-color: cornflowerblue;
            padding: 5px
        }


        table.characterRolse {
            border: 1px solid #333;
            border-collapse: collapse;
            width: 100%
        }


            table.characterRolse th {
                padding: 8px;
                border: 1px solid #333;
                background-color: cornflowerblue;
            }

            table.characterRolse td {
                padding: 8px;
                border: 1px solid #333;
                background-color: #ffffff;
            }
</style>

在html的body中写入table,第一列是“角色名”;第二列是“角色用户组的子项目”;第三列“选取角色”为checkbox选取对应角色。写入div放入两组按钮,分别用来处理checkbox的全选或取消全选清空用。分别加入上面对应的css样式属性。

HTML 代码  复制
<body>
    <!--Copyright(C) 遗昕|Weisim3.com 12.03.2019
         Javascript处理checkbox全选方法-->

    <table class="characterRolse">
        <thead>
            <tr>
                <th>角色名</th>
                <th class="">用户组的子项目</th>
                <th class="alignCenter">选取角色</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a href="" style="">图像设计</a>
                </td>
                <td>Adobe,Corel                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_2" type="checkbox" >
                </td>
            </tr>
            <tr>
                <td>
                    <a href="" style="">程序Web开发</a>
                </td>
                <td>Javascript/Html,Microsoft,Oracle/Sun,Zend,Web综合,Adobe                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_3" type="checkbox" >
                </td>
            </tr>
            <tr>
                <td>
                    <a href="" style="">移动/手机应用开发</a>
                </td>
                <td>Android,iPhone,Windows Phone,移动开发综合                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_4" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <a href="" style="">动画 CG</a>
                </td>
                <td>Autodesk,NewTek,MAXON,Zbrush,影视动漫媒体                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_5" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <a href="" style="">办公</a>
                </td>
                <td>Adobe,Microsoft                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_6" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <a href="" style="">电脑音乐/音乐</a>
                </td>
                <td>Imgae-Line,Cakewalk,音乐综合                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_7" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <a href="" style="">图片</a>
                </td>
                <td>设计图例,桌面墙纸,摄影图例                 </td>
                <td class="alignCenter">
                    <input id="Checkbox_8" type="checkbox">
                </td>
            </tr>
        </tbody>

    </table>
    <div class="tableFooter alignRight">
        <div style="float: right; padding: 0px 10px">
            B:<input id="Btn_Check_All" type="button" value="全选" onclick="CheckAll()" />
            <input id="Btn_Uncheck_All" type="button" value="清空" onclick="UnCheckAll()" />
        </div>

        <div style="float: right; padding: 0px 10px">
            A:<input id="Btn_Check_All_A" type="button" value="全选" onclick="CheckAll_A()" />
            <input id="Btn_Uncheck_All_A" type="button" value="清空" onclick="UnCheckAll_A()" />
        </div>
        <div style="clear: both"></div>
    </div>
</body>

加入jquery选取table中所有的checkbox“$(".characterRolse input[type='checkbox']")”,用.each或for方式将checkbox循环处理checkbox的checked属性,用for循环,需要先将table中的checkbox全部数量获取“$(".characterRolse input[type='checkbox']").length”,然后将checkbox逐个循环处理checked属性。示例分别对.each和for两种方式进行了代码演示,详细脚本如下:

JScript 代码  复制
<script type="text/javascript">

        /* Copyright(C) 遗昕|Weisim3.com 12.03.2019
         Javascript处理checkbox全选方法 */

        function CheckAll() {
            alert($(".characterRolse input[type='checkbox']").length);

            $(".characterRolse input[type='checkbox']").each(function () {
                this.checked = true;
            });
        }

        function UnCheckAll() {
            $(".characterRolse input[type='checkbox']").each(function () {
                this.checked = false;
            });
        }




        function CheckAll_A() {
            var checkLength = $(".characterRolse input[type='checkbox']").length;
            for (var i = 0; i < checkLength; i++) {
                $(".characterRolse input[type='checkbox']")[i].checked = true;
            }

        }

        function UnCheckAll_A() {

            var checkLength = $(".characterRolse input[type='checkbox']").length;
            for (var i = 0; i < checkLength; i++) {
                $(".characterRolse input[type='checkbox']")[i].checked = false;
            }
        }
 </script>

最终效果如下:

免费
Javascript处理checkbox全选方法 (6)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .