zoukankan      html  css  js  c++  java
  • Html checkbox全选

    html中全选

    <table class="data-table td-center">
                                 <tr>
                                    <td><input type="checkbox" id="ckAll" name="checkAll"  />全选</td>
                                    <td>编号</td>
                                    <td>姓名</td>
                                    <td>班级</td>
                                    <td>年龄</td>
                                    <td>邮箱</td>
                                    <td>操作</td>
                                 </tr>
                                 <tr>
                                    <td><input type="checkbox" name="checkItem" onclick="checkOne(this)"/></td>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>2班</td>
                                    <td>12</td>
                                    <td>zs@qq.com</td>
                                    <td><a href='javascript:void(0);'>删除</a></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="checkItem" onclick="checkOne(this)" /></td>
                                    <td>2</td>
                                    <td>李四</td>
                                    <td>1班</td>
                                    <td>11</td>
                                    <td>ls@qq.com</td>
                                    <td><a href='javascript:void(0);'>删除</a></td>
                                </tr>
                            </table>

    jquery 代码

     $(document).ready(function () {
                $("input[name=checkAll]").click(function () {
                    if (this.checked)
                        $("input[name=checkItem]").prop("checked", true);
                    else
                        $("input[name=checkItem]").prop("checked", false);
                });
    
                $("#ckAll").click();
            })
    
    
            function checkOne(ths) {
                if (ths.checked == false)
                    $("input[name=checkAll]").prop("checked", false);
                else {
                    var count = $("input[name=checkItem]:checkbox:checked").length;
                    if (count == $("input[name=checkItem]:checkbox").length) {
                        $("input[name=checkAll]").prop("checked", true);
                    }
                }
            }
  • 相关阅读:
    最好的云备份选项
    不要让你的云备份策略退居次位
    了解区域类型
    Managing WMI security
    创建、导入、导出、复制以及粘贴 WMI 筛选器
    Gpfixup
    centos 7 安装MySQL 5.7.23
    centos 7 配置 mysql 5.7 主从复制
    oracle DG搭建
    undo表空间丢失、损坏
  • 原文地址:https://www.cnblogs.com/ZJ199012/p/10469678.html
Copyright © 2011-2022 走看看